<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <!--头部信息-->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--title keywords description 请改为自己的-->
    <title>Web Nav - h7ml-前端物语</title>
    <meta
      name="keywords"
      content="h7ml,h7ml博客,h7ml.cn,前端开发,VuePress博客,vue,react,angular,element-ui,uni-app,vscode,javascript,css,css3,html5,mysql,docker,rxjava,redis,vite,miniprogram,微信小程序,linux,nginx,navicat,python,go,php,erlang"
    />
    <link rel="canonical" href="https://www.h7ml.cn/" />
    <meta property="og:url" content="https://www.h7ml.cn/" />
    <meta property="og:site_name" content="h7ml-前端物语" />
    <meta property="og:title" content="前端物语" />
    <meta property="og:description" content="h7ml-每一个不曾起舞的日子,都是对生命的辜负!" />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="zh-CN" />
    <meta property="og:updated_time" content="2023-02-24T16:45:13.000Z" />
    <meta property="article:modified_time" content="2023-02-24T16:45:13.000Z" />
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebPage",
        "name": "前端物语",
        "description": "h7ml-每一个不曾起舞的日子,都是对生命的辜负!"
      }
    </script>
    <meta name="description" content="h7ml-每一个不曾起舞的日子,都是对生命的辜负!" />
    <meta name="baidu-site-verification" content="code-Lp1igULfj7" />
    <meta name="sogou_site_verification" content="BWYVlXjMMm" />
    <meta name="shenma-site-verification" content="ee99e8921fe7309289e832fd8b02b3c4_1675848238" />
    <meta name="360-site-verification" content="d429aed2ee74fc7e9fd3e2321ce178a7" />
    <meta name="google-site-verification" content="aY4x14jxZErrVd-FCPVQDhEjk9A_kKf9Cav8QDDVi98" />
    <meta name="X-UA-Compatible" content="X-UA-Compatible" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2410206_mfj6e1vbwo.css" />
    <script src="https://hm.baidu.com/hm.js?35afc12d4ac49f5dd49db387044b8cd0"></script>
    <link rel="icon" href="/favicon.ico" />
    <link
      rel="icon"
      href="https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/icon/chrome-mask-512.png"
      type="image/png"
      sizes="512x512"
    />
    <link
      rel="icon"
      href="https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/icon/chrome-mask-192.png"
      type="image/png"
      sizes="192x192"
    />
    <link
      rel="icon"
      href="https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/icon/chrome-512.png"
      type="image/png"
      sizes="512x512"
    />
    <link
      rel="icon"
      href="https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/icon/chrome-192.png"
      type="image/png"
      sizes="192x192"
    />
    <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials" />
    <meta name="theme-color" content="#46bd87" />
    <link rel="apple-touch-icon" href="https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/icon/apple-icon-152.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="msapplication-TileImage" content="https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/icon/ms-icon-144.png" />
    <meta name="msapplication-TileColor" content="#ffffff" />

    <!--网站favicon可以没有或者改为自己的-->
    <link rel="shortcut icon" type="image/x-icon" href="https://www.h7ml.cn/logo.png" />

    <!--CSS 若不需要变动样式不用改-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/css/zui.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      ul {
        padding: 0;
      }

      li {
        list-style: none;
      }

      .card-img {
        width: 40px;
        height: 40px;
        float: right;
      }

      a:hover,
      a:active,
      a:focus {
        text-decoration: none;
      }

      body {
        background-image: url();
        background-repeat: repeat;
        background-attachment: fixed;
        overflow-x: hidden;
        overflow-y: auto;
      }

      i.icon,
      i.fa {
        margin-right: 6px;
      }

      .col,
      .col-xs-1,
      .col-xs-2,
      .col-xs-3,
      .col-xs-4,
      .col-xs-5,
      .col-xs-6,
      .col-xs-7,
      .col-xs-8,
      .col-xs-9,
      .col-xs-10,
      .col-xs-11,
      .col-xs-12,
      .col-sm-1,
      .col-sm-2,
      .col-sm-3,
      .col-sm-4,
      .col-sm-5,
      .col-sm-6,
      .col-sm-7,
      .col-sm-8,
      .col-sm-9,
      .col-sm-10,
      .col-sm-11,
      .col-sm-12,
      .col-md-1,
      .col-md-2,
      .col-md-3,
      .col-md-4,
      .col-md-5,
      .col-md-6,
      .col-md-7,
      .col-md-8,
      .col-md-9,
      .col-md-10,
      .col-md-11,
      .col-md-12,
      .col-lg-1,
      .col-lg-2,
      .col-lg-3,
      .col-lg-4,
      .col-lg-5,
      .col-lg-6,
      .col-lg-7,
      .col-lg-8,
      .col-lg-9,
      .col-lg-10,
      .col-lg-11,
      .col-lg-12 {
        padding: 0px 5px;
      }

      header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        height: 50px;
        background: #fff;
      }

      header .logo {
        font-size: 20px;
        height: 50px;
        margin: 0;
        font-weight: 400;
        position: relative;
        z-index: 99;
        border-bottom: 1px solid #e8e8e8;
        background: #fff;
        text-align: center;
      }

      header .main {
        position: relative;
      }

      header .nav {
        width: 100%;
        margin-left: 25px;
        background: #fff;
        margin: 0;
        overflow: hidden;
        transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        /* Firefox 4 */
        -webkit-transition: all 0.4s ease;
        /* Safari  Chrome */
        -o-transition: all 0.4s ease;
        /* Opera */
        position: absolute;
        top: -300px;
        left: 0;
      }

      header .showNav {
        top: 50px;
        box-shadow: 0 5px 5px rgba(204, 204, 204, 0.15);
        -moz-box-shadow: 0 5px 5px rgba(204, 204, 204, 0.15);
      }

      header .nav li {
        font-size: 16px;
      }

      header .nav a {
        display: block;
        line-height: 40px;
        font-size: 16px;
        color: #959595;
        padding: 0 25px;
        border-bottom: 1px solid #f5f5f5;
      }

      header .nav a:hover {
        border-color: #459df5;
        color: #459df5;
      }

      header .head-btn {
        float: right;
        line-height: 60px;
      }

      header .head-btn a {
        margin-left: 5px;
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #f5f5f5;
        color: #03b8cf;
        border: 1px solid #e5e5e5;
        transition: all 0.2s;
        -moz-transition: all 0.2s;
        /* Firefox 4 */
        -webkit-transition: all 0.2s;
        /* Safari Chrome */
        -o-transition: all 0.2s;
        /* Opera */
      }

      header .head-btn a:hover {
        background: #03b8cf;
        color: #fff;
        border: 1px solid #03b8cf;
      }

      header .head-btn a > i {
        margin-right: 0px;
        font-size: 15px;
      }

      header .nav-btn {
        position: fixed;
        border: none;
        background: transparent;
        top: 0;
        left: 10px;
        outline: 0;
        margin-top: 10px;
        z-index: 100;
      }

      header .nav-btn {
        left: inherit;
        right: 10px;
      }

      header .nav-btn .icon-line {
        display: block;
        margin: 6px 0;
        width: 25px;
        height: 2px;
        background: #999;
        cursor: pointer;
        transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        /* Firefox 4 */
        -webkit-transition: all 0.4s ease;
        /* Safari  Chrome */
        -o-transition: all 0.4s ease;
        /* Opera */
      }

      header .nav-btn .middle {
        margin: 0 auto;
      }

      header .animated2 .top {
        transform: translateY(8px) rotateZ(45deg);
        -ms-transform: translateY(8px) rotateZ(45deg);
        /* IE 9 */
        -moz-transform: translateY(8px) rotateZ(45deg);
        /* Firefox */
        -webkit-transform: translateY(8px) rotateZ(45deg);
        /* Safari 鍜� Chrome */
        -o-transform: translateY(8px) rotateZ(45deg);
        /* Opera */
      }

      header .animated2 .middle {
        width: 0;
      }

      header .animated2 .bottom {
        transform: translateY(-8px) rotateZ(-45deg);
        -ms-transform: translateY(-8px) rotateZ(-45deg);
        /* IE 9 */
        -moz-transform: translateY(-8px) rotateZ(-45deg);
        /* Firefox */
        -webkit-transform: translateY(-8px) rotateZ(-45deg);
        /* Safari Chrome */
        -o-transform: translateY(-8px) rotateZ(-45deg);
        /* Opera */
      }

      .left-bar {
        position: fixed;
        top: 50px;
        left: -240px;
        width: 200px;
        max-width: 100%;
        height: 100%;
        background: #353535;
        z-index: 12;
        transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        /* Firefox 4 */
        -webkit-transition: all 0.4s ease;
        /* Safari 鍜� Chrome */
        -o-transition: all 0.4s ease;
        /* Opera */
        transform: translateZ(0);
        -ms-transform: translateZ(0);
        /* IE 9 */
        -moz-transform: translateZ(0);
        /* Firefox */
        -webkit-transform: translateZ(0);
        /* Safari 鍜� Chrome */
        -o-transform: translateZ(0);
        /* Opera */
      }

      .left-bar .header {
        padding: 0px 15px;
        border-bottom: 1px solid #464646;
      }

      .left-bar .header h2 {
        font-size: 17px;
        line-height: 40px;
        max-width: 100%;
        overflow: hidden;
        margin: 0;
        font-weight: 400;
        display: block;
        color: #ccc;
      }

      .left-bar .menu {
        height: 450px;
        margin-bottom: 15px;
        border-bottom: 1px solid #424242;
      }

      .left-bar .menu ul li a {
        display: block;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        color: #777;
        padding-left: 38px;
      }

      .scrollcontent {
        width: 100%;
        top: 0;
        left: 0;
        padding-right: 4px;
        padding-top: 5px;
      }

      .left-bar .menu ul li a:hover {
        background: #f5f5f5;
      }

      .left-bar .menu ul li i.fa {
        width: 15px;
        text-align: center;
        margin-right: 20px;
      }

      .left-bar .tree li.open > ul::-webkit-scrollbar {
        width: 3px;
        margin-right: 2px;
      }

      .menu-about p {
        font-size: 12px;
        color: #ccc;
        text-align: center;
      }

      #content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }

      #content > .Off-left-menu {
        display: none;
      }

      #content > div.center-main {
        margin: 0 auto;
      }

      .sousuo {
        padding: 35px 0;
      }

      .search {
        position: relative;
        width: 100%;
        margin: 0 auto;
      }

      .search-box {
        height: 50px;
        /*box-shadow: 0px 0px 2px 0px #ccc;*/
        border-radius: 10px;
        overflow: hidden;
        display: -webkit-flex;
        /* Safari */
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #e6e6e6;
      }

      .search-engine-name {
        width: 69px;
        height: 50px;
        background: #16c0f8;
        border: none;
        color: #fff;
        font-weight: bold;
        outline: none;
      }

      .search-input {
        box-sizing: border-box;
        flex: 1;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        color: #999;
        border: none;
        outline: none;
        padding-left: 6px;
      }

      input::-webkit-input-placeholder {
        font-size: 12px;
        letter-spacing: 1px;
        color: #ccc;
      }

      .search-btn {
        width: 80px;
        height: 50px;
        background: #16c0f8;
        border: none;
        color: #fff;
        font-weight: bold;
        outline: none;
      }

      .search-engine {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 15px 0 0 15px;
        border-radius: 5px;
        box-shadow: 0px 5px 20px 0px #d8d7d7;
        transition: all 0.3s;
        display: none;
        z-index: 999;
      }

      .search-engine-head {
        overflow: hidden;
        margin-bottom: 10px;
        padding-right: 15px;
      }

      .search-engine-tit {
        float: left;
        margin: 0;
        font-size: 14px;
        color: #999;
      }

      .search-engine ul::before {
        content: '';
        width: 0px;
        height: 0px;
        position: absolute;
        top: -15px;
        border-top: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #fff;
        border-left: 8px solid transparent;
      }

      .search-engine-list::after {
        content: '';
        width: 70px;
        height: 18px;
        position: absolute;
        top: -17px;
        left: 1px;
      }

      .search-engine-list li {
        float: left;
        width: 30%;
        line-height: 30px;
        font-size: 14px;
        padding: 5px 10px 5px 10px;
        margin: 0 10px 10px 0;
        background: #f9f9f9;
        color: #999;
        cursor: pointer;
      }

      .search-engine-list li img {
        width: 25px;
        height: 25px;
        border-radius: 15px;
        float: left;
        margin-right: 5px;
        margin-top: 2.5px;
      }

      #content .content-box {
        padding-top: 51px;
      }

      .content-box {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 10px;
      }

      .item {
        width: 100%;
      }

      .item > .container-fluid {
        padding-top: 0;
        margin-top: 0;
      }

      .item > .container-fluid .row {
        padding: 10px 5px;
      }

      .item-tit > strong {
        color: #999;
        font-size: 18px;
        font-weight: 400;
        display: block;
        margin-bottom: 10px;
        padding-left: 5px;
      }

      .item-tit > strong > i {
        margin-right: 5px;
        font-size: 18px;
      }

      .card-link {
        display: block;
        padding: 10px 10px;
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 10px;
        background: #fff;
        transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        /* Firefox 4 */
        -webkit-transition: all 0.2s ease-out;
        /* Safari Chrome */
        -o-transition: all 0.2s ease-out;
        /* Opera */
      }

      .card-link:hover {
        transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        /* IE 9 */
        -moz-transform: translateY(-5px);
        /* Firefox */
        -webkit-transform: translateY(-5px);
        /* Safari  Chrome */
        -o-transform: translateY(-5px);
        /* Opera */
        box-shadow: 4px 4px 10px rgba(204, 204, 204, 0.5);
        -moz-box-shadow: 4px 4px 10px rgba(204, 204, 204, 0.5);
        /* Firefox */
      }

      .card-tit {
        height: 20px;
        font-size: 14px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
      }

      .card-tit img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 5px;
      }

      .card-desc {
        color: gray;
        font-size: 12px;
        padding-top: 10px;
        height: 45px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .content-box .list-box {
        background: #fff;
        padding: 20px 10px 0px 10px;
        margin: 0;
      }

      #get-top {
        width: 40px;
        height: 40px;
        background: #03b8cf;
        color: #fff;
        position: fixed;
        right: 15px;
        bottom: 55px;
        line-height: 30px;
        text-align: center;
        font-size: 30px;
        cursor: pointer;
        display: none;
        z-index: 100;
      }

      #get-top i {
        margin: 0;
        font-size: 20px;
      }

      .footer {
        padding: 15px 20px 10px 20px;
        border-top: 1px solid #d0d0d0;
        background-color: #e8e8e8;
        text-align: center;
        font-size: 14px;
        color: #5d5d5d;
      }

      @media (min-width: 768px) {
        .col,
        .col-xs-1,
        .col-xs-2,
        .col-xs-3,
        .col-xs-4,
        .col-xs-5,
        .col-xs-6,
        .col-xs-7,
        .col-xs-8,
        .col-xs-9,
        .col-xs-10,
        .col-xs-11,
        .col-xs-12,
        .col-sm-1,
        .col-sm-2,
        .col-sm-3,
        .col-sm-4,
        .col-sm-5,
        .col-sm-6,
        .col-sm-7,
        .col-sm-8,
        .col-sm-9,
        .col-sm-10,
        .col-sm-11,
        .col-sm-12,
        .col-md-1,
        .col-md-2,
        .col-md-3,
        .col-md-4,
        .col-md-5,
        .col-md-6,
        .col-md-7,
        .col-md-8,
        .col-md-9,
        .col-md-10,
        .col-md-11,
        .col-md-12,
        .col-lg-1,
        .col-lg-2,
        .col-lg-3,
        .col-lg-4,
        .col-lg-5,
        .col-lg-6,
        .col-lg-7,
        .col-lg-8,
        .col-lg-9,
        .col-lg-10,
        .col-lg-11,
        .col-lg-12 {
          padding: 0 10px;
        }

        #content .main {
          padding-top: 51px;
        }

        .sousuo {
          padding: 10px 0 50px 0;
          margin-top: 0;
        }

        .sousuo-form {
          width: 100%;
          margin: 0 auto;
        }

        #input {
          outline: none;
          padding: 0 10px;
          height: 46px;
          line-height: 46px;
          border: 1px solid #ccc;
          border-left: none;
          display: block;
          padding-left: 90px;
        }

        .link-box {
          width: 12.5%;
          float: left;
        }

        .item-tit > strong {
          padding: 5px 0 0 10px;
          margin-bottom: 10px;
        }

        .get-home {
          margin: 0;
          margin-top: 20px;
        }

        .footer {
          margin-top: 20px;
        }
      }

      @media (min-width: 992px) {
        header {
          height: 60px;
          border-bottom: 1px solid #e8e8e8;
        }

        header .main {
          padding: 0 22px;
        }

        header .logo {
          float: left;
          font-size: 22px;
          margin: 0;
          font-weight: 400;
          border: none;
        }

        header .logo a {
          display: block;
          line-height: 50px;
          color: #484848;
          font-weight: 400;
        }

        header .logo img {
          width: 30px;
          vertical-align: -10px;
        }

        header .nav {
          float: left;
          margin-left: 25px;
          padding-top: 0px;
          height: 100%;
          display: block;
          overflow: hidden;
          position: static;
          width: auto;
          box-shadow: none;
        }

        header .nav li {
          float: left;
          font-size: 16px;
        }

        header .nav a {
          display: block;
          line-height: 59px;
          color: #959595;
          padding: 0 18px;
          border-bottom: 1px solid #e8e8e8;
        }

        header .nav a:hover {
          border-color: #459df5;
          color: #459df5;
        }

        .left-bar {
          height: 100%;
          background: #fff;
          top: 60px;
          left: 0;
          z-index: 1;
        }

        .left-bar .header {
          padding: 11px 0px;
          border-bottom: none;
          margin: 0 25px;
          padding-top: 15px;
        }

        .left-bar .header h2 {
          color: #28b779;
          font-size: 16px;
          font-weight: bold;
          line-height: inherit;
          border-left: 3px solid #28b779;
          padding-left: 10px;
        }

        .left-bar .menu {
          height: 600px;
          border-top: 1px solid #f2f2f2;
          border-bottom: 1px solid #f2f2f2;
        }

        .left-bar .tree-menu {
          border-bottom: 1px solid #e8e8e8;
        }

        .left-bar .tree li.open > ul {
          height: 281px;
          background: #f5f5f5;
        }

        .tree-menu li li a {
          color: #797979;
          font-size: 14px;
        }

        .search {
          width: 650px;
        }

        .search-engine {
          width: 650px;
        }

        .search-engine-list li {
          width: 112px;
          margin: 0 15px 15px 0;
        }

        #content .main {
          margin-left: 200px;
          padding-top: 70px;
        }

        .content-box {
          padding: 0 10px;
          padding-top: 61px;
        }

        .nav-item .container-fluid {
          padding: 20px 20px 10px 20px;
        }

        .item > .container-fluid .row {
          padding: 0;
        }

        .card-box .col-md-3 {
          padding: 0 7.5px;
        }

        .card-link {
          margin-bottom: 15px;
        }

        .main .list-box .menu-list {
          margin: 0px 10px 20px 10px;
        }

        .nav-tabs > li > a {
          padding: 4px 15px;
        }

        .footer {
          margin-top: 30px;
        }
      }

      @media (min-width: 1200px) {
        header .nav a {
          padding: 0 25px;
        }

        .content-box {
          padding: 0 20px;
        }

        .sousuo-form {
          width: 60%;
        }

        .item > .container-fluid {
          padding: 0;
          padding-top: 91px;
          margin-top: -65px;
        }
      }

      @media (min-width: 1700px) {
        .content-box {
          max-width: 1400px;
        }

        .col-md-3 {
          width: 20%;
        }
      }
    </style>
  </head>
  <body id="nav_body">
    <!--[if lt IE 10]>
      <div class="alert alert-danger">
        您正在使用
        <strong>过时的</strong>
        浏览器. 请更换一个更好的浏览器来提升用户体验.
      </div>
    <![endif]-->
    <!--头部导航条-->
    <header>
      <div class="main">
        <h1 class="logo">
          <a href="/">
            <span>Web Nav</span>
          </a>
        </h1>
        <!--顶部导航条-->
        <!--便携设备右上角菜单-->
        <button class="nav-btn visible-xs visible-sm">
          <span class="icon-line top"></span>
          <span class="icon-line middle"></span>
          <span class="icon-line bottom"></span>
        </button>
      </div>
    </header>
    <div id="content">
      <!--左侧目录，导航跳转-->
      <div class="left-bar">
        <div class="header">
          <h2>目录</h2>
        </div>
        <div class="menu" id="menu">
          <ul class="scrollcontent"></ul>
        </div>
      </div>
      <!--内容-->
      <div class="main">
        <div class="container content-box">
          <!--搜索栏-->
          <section class="sousuo">
            <div class="search">
              <div class="search-box">
                <button class="search-engine-name" id="search-engine-name">百度搜索</button>
                <input type="text" id="txt" class="search-input" placeholder="选择引擎，输入关键字，回车/Enter搜索" />
                <button class="search-btn" id="search-btn">搜索</button>
              </div>
              <!-- 搜索引擎 -->
              <div class="search-engine">
                <div class="search-engine-head">
                  <strong class="search-engine-tit">选择您的默认搜索引擎：</strong>
                </div>
                <ul class="search-engine-list"></ul>
              </div>
            </div>
          </section>
          <div id="page"></div>
          <!--页脚-->
          <footer class="footer">
            <div class="container">
              <div class="rwo">
                <div class="col-md-12">
                  <p>本站内容源自互联网，如有内容侵犯了你的权益，请联系删除相关内容，联系邮箱：h7ml@qq.com</p>
                  <!--代码源自小呆导航的开源代码，遵循MIT协议，此处保留源代码的声明-->
                  <p>Copyright © 2023 web Nav（h7ml.cn/nav）All Rights Reserved</p>
                </div>
              </div>
            </div>
          </footer>
        </div>
        <!--内容区域-->
      </div>
      <div id="get-top" title="回到顶部">
        <i class="icon icon-arrow-up"></i>
      </div>
    </div>
    <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://hm.baidu.com/hm.js?35afc12d4ac49f5dd49db387044b8cd0"></script>
    <script>
      const nav = [
        {
          Category_id: 'reactEcology',
          category_CN: 'React生态',
          category_icon: 'icon-ui',
          category_item: 'reactEcologyItem',
          item_children: [
            {
              child_name: 'React',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/react.svg',
              a_href: 'https://zh-hans.reactjs.org/',
              child_desc: '用于构建用户界面的 JavaScript 库',
            },
            {
              child_name: 'React Router',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/reactRouter.png',
              a_href: 'https://reactrouter.com/en/main',
              child_desc: 'React Router官方文档',
            },
            {
              child_name: 'Redux',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/redux.png',
              a_href: 'https://cn.redux.js.org/',
              child_desc: 'Redux官方中文文档',
            },
            {
              child_name: 'Mobx',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/mobx.jpeg',
              a_href: 'https://zh.mobx.js.org/README.html',
              child_desc: 'Mobx官方中文文档',
            },
            {
              child_name: 'Dvajs',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/dva.png',
              a_href: 'https://dvajs.com/guide/',
              child_desc: 'Dvajs官方文档',
            },
            {
              child_name: 'Crate-React-App',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/cra.png',
              a_href: 'https://create-react-app.dev/',
              child_desc: 'React 官方脚手架工具',
            },
            {
              child_name: 'Umi',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/umi.png',
              a_href: 'https://umijs.org/',
              child_desc: '企业级前端框架',
            },
            {
              child_name: 'Ant Design',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/antd.png',
              a_href: 'https://ant.design/index-cn',
              child_desc: '助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～',
            },
            {
              child_name: 'Ant Design Pro',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/antd.png',
              a_href: 'https://pro.ant.design/zh-CN/',
              child_desc: '开箱即用的中台前端/设计解决方案',
            },
            {
              child_name: 'Pro Components',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/antd.png',
              a_href: 'https://procomponents.ant.design/',
              child_desc: '让中后台开发更简单',
            },
            {
              child_name: 'Nextjs',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/nextjs.png',
              a_href: 'https://nextjs.org/',
              child_desc: 'The React Framework for the Web',
            },
            {
              child_name: 'SWR',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/swr.png',
              a_href: 'https://swr.vercel.app/zh-CN',
              child_desc: '用于数据请求的 React Hooks 库',
            },
            {
              child_name: 'React-query',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/reactQuery.png',
              a_href: 'https://react-query-v3.tanstack.com/',
              child_desc: 'Performant and powerful data synchronization for React',
            },
            {
              child_name: 'umi-request',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/umi.png',
              a_href: 'https://github.com/umijs/umi-request',
              child_desc:
                '网络请求库，基于 fetch 封装, 兼具 fetch 与 axios 的特点, 旨在为开发者提供一个统一的 api 调用方式, 简化使用, 并提供诸如缓存, 超时, 字符编码处理, 错误处理等常用功能.',
            },
            {
              child_name: 'ahooks',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ahooks.jpeg',
              a_href: 'https://ahooks.js.org/zh-CN/',
              child_desc: '一套高质量可靠的 React Hooks 库',
            },
            {
              child_name: 'react-use',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/react.png',
              a_href: 'https://github.com/streamich/react-use',
              child_desc: '有赞团队出品的轻量、可靠的移动端 Vue 组件库',
            },
            {
              child_name: 'zustand',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/zustand.jpeg',
              a_href: 'https://youzan.github.io/vant/#/zh-CN/intro',
              child_desc: '有赞团队出品的轻量、可靠的移动端 Vue 组件库',
            },
            {
              child_name: 'jotai',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/jotai.jpeg',
              a_href: 'https://jotai.org/',
              child_desc: 'Primitive and flexible state management for React',
            },
            {
              child_name: 'valtio',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/valtio.png',
              a_href: 'https://valtio.pmnd.rs/',
              child_desc: 'Valtio makes proxy-state simple for React and Vanilla',
            },
            {
              child_name: 'Recoil',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/recoil.png',
              a_href: 'https://recoiljs.org/',
              child_desc: 'A state management library for React',
            },
            {
              child_name: 'Redux Toolkit',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/reduxTookit.png',
              a_href: 'https://redux-toolkit.js.org/',
              child_desc: 'The official, opinionated, batteries-included toolset for efficient Redux development',
            },
            {
              child_name: 'Father',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/umi.png',
              a_href: 'https://github.com/umijs/father',
              child_desc:
                'father 是一款 NPM 包研发工具，能够帮助开发者更高效、高质量地研发 NPM 包、生成构建产物、再完成发布。它主要具备以下特性',
            },
            {
              child_name: 'Dumi',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/dumi.png',
              a_href: 'https://d.umijs.org/',
              child_desc: '为组件研发而生的静态站点框架',
            },
            {
              child_name: 'Ant Design Mobile',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/antdm.png',
              a_href: 'https://mobile.ant.design/zh',
              child_desc: '探索移动端 Web 的体验极限',
            },
            {
              child_name: 'Qiankun',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/qiankun.png',
              a_href: 'https://qiankun.umijs.org/',
              child_desc: '可能是你见过最完善的微前端解决方案',
            },
            {
              child_name: 'Motion',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/motion.png',
              a_href: 'https://motion.ant.design/index-cn',
              child_desc:
                '使用 Ant Motion 能够快速在 React 框架中使用动画。我们提供了单项，组合动画，以及整套解决方案。',
            },
            {
              child_name: 'Remix',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/remix.png',
              a_href: 'https://remix.run/',
              child_desc:
                'Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.',
            },
            {
              child_name: '飞冰',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ice.png',
              a_href: 'https://v3.ice.work/',
              child_desc:
                'Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.',
            },
          ],
        },
        {
          Category_id: 'vueEcology',
          category_CN: 'Vue生态',
          category_icon: 'icon-vuejs1',
          category_item: 'vueEcologyItem',
          item_children: [
            {
              child_name: 'Vue3',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vuejs.png',
              a_href: 'https://cn.vuejs.org/',
              child_desc: '一套用于构建用户界面的渐进式框架.简单却不失优雅,小巧而不乏大匠',
            },
            {
              child_name: 'Vue2',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vuejs.png',
              a_href: 'https://v2.cn.vuejs.org/',
              child_desc: '一套用于构建用户界面的渐进式框架.简单却不失优雅,小巧而不乏大匠',
            },
            {
              child_name: 'Vue Router',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vuejs.png',
              a_href: 'https://router.vuejs.org/zh/',
              child_desc: 'Vue Router官方中文文档',
            },
            {
              child_name: 'Pinia',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/pinia.png',
              a_href: 'https://pinia.vuejs.org/zh/',
              child_desc: '符合直觉的Vue.js 状态管理库',
            },
            {
              child_name: 'Vuex',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/Vuex.png',
              a_href: 'https://vuex.vuejs.org/zh/',
              child_desc: 'Vuex官方中文文档',
            },
            {
              child_name: 'create-vue',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vuejs.png',
              a_href: 'https://github.com/vuejs/create-vue',
              child_desc: 'The recommended way to start a Vite-powered Vue project',
            },
            {
              child_name: 'Vue CLI',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vuejs.png',
              a_href: 'https://cli.vuejs.org/zh/',
              child_desc: 'Vue.js 官方脚手架工具',
            },
            {
              child_name: 'awesome-vue',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/awesome-vue.png',
              a_href: 'https://github.com/vuejs/awesome-vue',
              child_desc: '(vue资源汇总)与Vue.js相关的精彩内容和精选列表',
            },
            {
              child_name: 'awesome-github-vue',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/awesome-github-vue.png',
              a_href: 'https://github.com/opendigg/awesome-github-vue',
              child_desc: 'Vue相关开源项目库汇总(中文)',
            },
            {
              child_name: 'Element Plus',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/element.png',
              a_href: 'https://element-plus.org/zh-CN/#/zh-CN',
              child_desc: '基于 Vue 3，面向设计师和开发者的组件库',
            },
            {
              child_name: 'ElementUI',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/element.png',
              a_href: 'https://element.eleme.cn/#/zh-CN',
              child_desc: 'Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库',
            },
            {
              child_name: 'Ant Design Vue',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ant-design-vue.png',
              a_href: 'https://vue.ant.design/docs/vue/introduce-cn/',
              child_desc: 'Ant Design 的 Vue 实现，开发和服务于企业级后台产品。',
            },
            {
              child_name: 'vant',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vant.png',
              a_href: 'https://youzan.github.io/vant/#/zh-CN/intro',
              child_desc: '有赞团队出品的轻量、可靠的移动端 Vue 组件库',
            },
            {
              child_name: 'cube-ui',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/cube-ui.png',
              a_href: 'https://didi.github.io/cube-ui/#/zh-CN',
              child_desc: '滴滴团队基于 Vue.js 实现的精致移动端组件库',
            },
            {
              child_name: 'mint-ui',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/mint-ui.png',
              a_href: 'http://mint-ui.github.io/#!/zh-cn',
              child_desc: '饿了么团队出品的基于 Vue.js 的移动端组件库',
            },
            {
              child_name: 'Vux',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vux.png',
              a_href: 'https://vux.li/#/zh-CN/README',
              child_desc: '一个凑合的 Vue.js 移动端 UI 组件库',
            },
            {
              child_name: 'Vuetifyjs',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vuetifyjs.png',
              a_href: 'https://vuetifyjs.com/zh-Hans/',
              child_desc: '一个高品质综合实用性、体验、格调的框架',
            },
            {
              child_name: 'Quasar',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/Quasar.png',
              a_href: 'https://quasar-framework.org/',
              child_desc: '较成熟的组件库，大名鼎鼎，组件丰富到变态~',
            },
            {
              child_name: 'Vuesax',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vuesax.png',
              a_href: 'https://lusaxweb.github.io/vuesax/#/',
              child_desc: '有若干常用组件，但有着非常美妙的色彩和反馈效果，充满活力与灵气',
            },
            {
              child_name: 'Vue资源精选',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vueawesometiny.png',
              a_href: 'http://vue.awesometiny.com/',
              child_desc: 'vue资源精选-前端组件库资源-前端选型',
            },
            {
              child_name: 'Eagle.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/eaglejs.png',
              a_href: 'https://github.com/Zulko/eagle.js',
              child_desc: '一个使用 Vue.js 开发的幻灯片框架',
            },
            {
              child_name: 'Vue-grid-layout',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vue-grid-layout.png',
              a_href: 'https://github.com/jbaysolutions/vue-grid-layout',
              child_desc: 'Vue.js 可拖动且可调整大小的网格布局',
            },
            {
              child_name: 'vue-content-loader',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vue-content-loader.png',
              a_href: 'https://github.com/egoist/vue-content-loader',
              child_desc: '用于创建占位符加载的 SVG 组件，例如 Facebook 卡片加载',
            },
            {
              child_name: 'vue-virtual-scroller',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vue-virtual-scroller.png',
              a_href: 'https://github.com/Akryum/vue-virtual-scroller',
              child_desc: '可以平滑滚动任意数量的数据',
            },
            {
              child_name: 'Mand Mobile',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/mand-mobile.png',
              a_href: 'https://mand-mobile.github.io/',
              child_desc: '面向金融场景的Vue移动端UI组件库',
            },
            {
              child_name: 'Vue-design-system',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vueds.png',
              a_href: 'https://vueds.com/',
              child_desc: '一个用于基于 Vue.js 构建 UI 设计系统的开源工具',
            },
            {
              child_name: 'Vue-Access-Control',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vueac.png',
              a_href: 'https://github.com/tower1229/Vue-Access-Control',
              child_desc: '一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案',
            },
            {
              child_name: 'Vue-Tree-Chart',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vuetc.png',
              a_href: 'https://github.com/tower1229/Vue-Tree-Chart',
              child_desc: '基于Vue2的树形图组件',
            },
            {
              child_name: 'vue-meta-info',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vue_meta_info.png',
              a_href: 'https://github.com/muwoo/vue-meta-info',
              child_desc:
                'vue-meta-info是一个基于vue 2.0的插件，它会让你更好的管理你的app里面的meta信息设置vue，支持SSR',
            },
            {
              child_name: 'vue-simple-uploader',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vue_simple_uploader.png',
              a_href: 'https://github.com/simple-uploader/vue-uploader/blob/master/README_zh-CN.md',
              child_desc: '一个基于 simple-uploader.js 的 Vue 上传组件',
            },
            {
              child_name: 'NutUI',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/nutui.png',
              a_href: 'http://nutui.jd.com',
              child_desc: '一套京东风格的轻量级移动端Vue组件库',
            },
          ],
        },
        {
          Category_id: 'nodejs',
          category_CN: 'Node相关',
          category_icon: 'icon-js',
          category_item: 'nodejsItem',
          item_children: [
            {
              child_name: 'nodejs文档',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/nodeapp.png',
              a_href: 'http://nodejs.cn/',
              child_desc: 'Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。',
            },
            {
              child_name: 'eggjs',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/egg.png',
              a_href: 'https://www.eggjs.org/zh-CN',
              child_desc: '为企业级框架和应用而生',
            },
            {
              child_name: 'express',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/express.png',
              a_href: 'https://www.expressjs.com.cn/',
              child_desc: '基于 Node.js 平台，快速、开放、极简的 Web 开发框架',
            },
            {
              child_name: 'koa',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/koa.png',
              a_href: 'https://koa.bootcss.com/',
              child_desc: '基于node平台的下一代web开发框架',
            },
            {
              child_name: 'nest',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/nest.png',
              a_href: 'https://docs.nestjs.cn/',
              child_desc: '用于构建高效且可伸缩的服务端应用程序的渐进式 Node.js 框架。',
            },
            {
              child_name: 'midway',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/midway.png',
              a_href: 'https://midwayjs.org/',
              child_desc:
                'Midway 是阿里巴巴 - 淘宝前端架构团队，基于渐进式理念研发的 Node.js 框架，通过自研的依赖注入容器，搭配各种上层模块，组合出适用于不同场景的解决方案',
            },
          ],
        },
        {
          Category_id: 'miniProgram',
          category_CN: '小程序相关',
          category_icon: 'icon-xiaochengxu1',
          category_item: 'miniProgramItem',
          item_children: [
            {
              child_name: '微信小程序文档',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/weixin.png',
              a_href: 'https://developers.weixin.qq.com/miniprogram/dev/index.html',
              child_desc: '微信小程序官方开发者文档',
            },
            {
              child_name: '微信开发者社区',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/developersweixin.png',
              a_href: 'https://developers.weixin.qq.com/community/develop/question',
              child_desc: '小程序开发者专区，微信公众平台,微信开放社区,开发者专区',
            },
            {
              child_name: '微信小程序开发资源汇总',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/awesome-wechat-weapp.png',
              a_href: 'https://github.com/justjavac/awesome-wechat-weapp',
              child_desc: '微信小程序开发资源汇总 awesome-wechat-weapp',
            },
            {
              child_name: 'WePY',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/wepy.png',
              a_href: 'https://wepyjs.github.io/wepy-docs/',
              child_desc: '支持组件化的小程序开发框架',
            },
            {
              child_name: 'mpvue',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/mpvue.png',
              a_href: 'http://mpvue.com/',
              child_desc: '基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系',
            },
            {
              child_name: 'uni-app',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/uniapp.png',
              a_href: 'https://uniapp.dcloud.io/',
              child_desc:
                'uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序等多个平台。',
            },
            {
              child_name: 'WeUI',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/weui.png',
              a_href: 'https://github.com/Tencent/weui',
              child_desc: '一套同微信原生视觉体验一致的基础样式库 为微信 Web 开发量身设计，令用户的使用感知更加统一',
            },
            {
              child_name: 'Taro',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/taro.png',
              a_href: 'https://taro.js.org/',
              child_desc: '使用 React 的方式开发小程序的框架，同时支持生成多端应用',
            },
            {
              child_name: 'Chameleon',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/cmljs.png',
              a_href: 'https://cml.js.org/',
              child_desc: '一套代码运行多端，一端所见即多端所见',
            },
            {
              child_name: '小程序社区',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/wxapp-union.png',
              a_href: 'http://www.wxapp-union.com/',
              child_desc: '小程序社区|小程序开发社区-小程序开发联盟',
            },
          ],
        },
        {
          Category_id: 'UIFrame',
          category_CN: 'UI框架',
          category_icon: 'icon-ui',
          category_item: 'UIFrameItem',
          item_children: [
            {
              child_name: 'Bootstrap',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/bootcss.jpg',
              a_href: 'http://www.bootcss.com/',
              child_desc: '简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。',
            },
            {
              child_name: 'Foundation',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/foundation.png',
              a_href: 'https://foundation.zurb.com/',
              child_desc: '一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。',
            },
            {
              child_name: 'Pure.css',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/purecss.png',
              a_href: 'https://purecss.io/',
              child_desc: '雅虎公司出品的一组轻量级、响应式纯css模块,适用于任何Web项目',
            },
            {
              child_name: 'Semantic UI',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/semanticui.png',
              a_href: 'https://semantic-ui.com/',
              child_desc: '一个用来帮助设计出漂亮的、响应化、人性化的网络框架',
            },
            {
              child_name: 'Material UI',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/material-ui.png',
              a_href: 'https://material-ui.com/',
              child_desc: '一组反应元件，实现谷歌的材料设计',
            },
            {
              child_name: 'Element',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/element.png',
              a_href: 'http://element-cn.eleme.io/#/zh-CN',
              child_desc: '一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库',
            },
            {
              child_name: 'iView',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/iview.png',
              a_href: 'https://www.iviewui.com/',
              child_desc: '一套基于 Vue.js 的高质量 UI 组件库',
            },
            {
              child_name: 'Ant Design',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/antdesign.png',
              a_href: 'https://ant.design/index-cn',
              child_desc: '蚂蚁金服的开箱即用的中台前端/设计解决方案',
            },
            {
              child_name: 'MetroUI',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/metroui.png',
              a_href: 'https://metroui.org.ua/',
              child_desc: '好看好用，重点是样式特别、个性',
            },
            {
              child_name: 'QMUI Web',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/QMUIWeb.png',
              a_href: 'https://qmuiteam.com/web/page/index.html',
              child_desc: '腾讯旗下团队 web UI解决方案',
            },
            {
              child_name: 'MDUI',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/mdui.png',
              a_href: 'https://www.mdui.org/',
              child_desc: 'MDUI 是一套用于开发 Material Design 网页的前端框架',
            },
            {
              child_name: 'Mobi.css',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/mobicss.png',
              a_href: 'http://getmobicss.com/',
              child_desc: '轻量灵活的移动端 CSS 框架',
            },
            {
              child_name: 'PaperCSS',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/getpapercss.png',
              a_href: 'https://www.getpapercss.com/',
              child_desc: '一个不太常规的CSS框架，如果你希望你的网站有手绘风格感觉，选择它准没错。',
            },
          ],
        },
        {
          Category_id: 'buildTools',
          category_CN: '编译&构建&打包',
          category_icon: 'icon-goujian',
          category_item: 'buildToolsItem',
          item_children: [
            {
              child_name: 'Webpack',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/Webpack.png',
              a_href: 'https://www.webpackjs.com/',
              child_desc: '目前最热门的前端资源模块化管理和打包工具',
            },
            {
              child_name: 'vite',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vite.png',
              a_href: 'https://cn.vitejs.dev/',
              child_desc: '下一代的前端工具链，为开发提供极速响应',
            },
            {
              child_name: 'rollup',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/rollup.png',
              a_href: 'https://www.rollupjs.com/',
              child_desc: 'Rollup 是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用',
            },
            {
              child_name: 'swc',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/swc.png',
              a_href: 'https://swc.rs/',
              child_desc:
                "SWC is an extensible Rust-based platform for the next generation of fast developer tools. It's used by tools like Next.js",
            },
            {
              child_name: 'esbuild',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/esbuild.png',
              a_href: 'https://esbuild.github.io/',
              child_desc: 'An extremely fast bundler for the web',
            },
            {
              child_name: 'turbopack',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/turbopack.jpeg',
              a_href: 'https://turbo.build/',
              child_desc:
                'Turbo is an incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust',
            },
            {
              child_name: 'Gulp',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/Gulp.png',
              a_href: 'https://www.gulpjs.com.cn/',
              child_desc: '用自动化构建工具增强你的工作流程！',
            },
            {
              child_name: 'Grunt',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/Grunt.png',
              a_href: 'https://www.gruntjs.net/',
              child_desc: 'JavaScript 世界的构建工具',
            },
            {
              child_name: 'Babel',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/babel.png',
              a_href: 'https://www.babeljs.cn/',
              child_desc: 'Babel 是一个 JavaScript 编译器。',
            },
            {
              child_name: 'pnpm',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/pnpm.png',
              a_href: 'https://pnpm.io/zh/',
              child_desc: '通过 npm 可以安装、共享、分发代码,管理项目依赖关系。',
            },
            {
              child_name: 'npm',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/npmjs.png',
              a_href: 'https://www.npmjs.com/',
              child_desc: '通过 npm 可以安装、共享、分发代码,管理项目依赖关系。',
            },
            {
              child_name: 'yarn',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/yarnpkg.png',
              a_href: 'https://www.yarnpkg.com/zh-Hans/',
              child_desc: '快速、可靠、安全的依赖管理。',
            },
            {
              child_name: 'bower',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/bower.png',
              a_href: 'https://bower.io/',
              child_desc: 'bower是一种包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。',
            },
            {
              child_name: 'PostCSS',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/postcss.png',
              a_href: 'https://www.postcss.com.cn/',
              child_desc: '是一个用 JavaScript 工具和插件转换 CSS 代码的工具',
            },
            {
              child_name: 'Parcel',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/parceljs.png',
              a_href: 'https://parceljs.org/',
              child_desc: '极速零配置Web应用打包工具',
            },
            {
              child_name: 'Critters',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/critters.png',
              a_href: 'https://github.com/GoogleChromeLabs/critters',
              child_desc:
                'webpack的插件，它可以很方便的配置内联关键css( critical CSS ),其余的css部分则会异步加载，由于它不使用无头浏览器(headless browser)呈现内容，因此快速轻巧。',
            },
            {
              child_name: 'Webpack Config Tool',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/WebpackConfigTool.png',
              a_href: 'https://webpack.jakoblind.no/',
              child_desc:
                '一款可视化的在线工具网站，你只需要选择前端项目运用到技术和相关配置，就能一键帮你生成webpack.config.js，省去你不少的麻烦。',
            },
            {
              child_name: 'JSUI',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/JSUI.png',
              a_href: 'https://github.com/kitze/JSUI',
              child_desc:
                '一个可视化分类、构建和管理 JavaScript 项目的工具。不管是前端应用还是后端应用，也不论使用的是哪种框架，只要项目有一个 package.json ，即可进行管理。',
            },
            {
              child_name: 'PWA Universal Builder',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/pwa.png',
              a_href: 'https://pwa.cafe/',
              child_desc:
                '一款脚手架构建工具，方便创建基于Preact，React，Vue和Svelte的项目，开箱及支持Babel，Bublé，Browserlist，TypeScript，PostCSS，ESLint，Prettier和Service Workers！',
            },
          ],
        },
        {
          Category_id: 'baseLearn',
          category_CN: '学习资源',
          category_icon: 'icon-xuexi',
          category_item: 'baseLearnItem',
          item_children: [
            {
              child_name: 'Mozilla 开发者网络',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/mozilla.jpg',
              a_href: 'https://developer.mozilla.org/zh-CN/',
              child_desc:
                'MDN Web Docs 网站提供开放网络（Open Web）技术有关的信息，包括用于网站和渐进式网络应用的 HTML、CSS 和 API。',
            },
            {
              child_name: 'freeCodeCamp中文社区',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/freecodecamp.png',
              a_href: 'https://forum.freecodecamp.org/c/chinese/533',
              child_desc: ' 一个帮助你学习编程的开源社区,开启你的软件工程师生涯.',
            },
            {
              child_name: '学习CSS布局',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/learnlayout.png',
              a_href: 'http://zh.learnlayout.com/',
              child_desc: '本站教授的是现在广泛使用于网站布局领域的CSS基础。',
            },
            {
              child_name: '菜鸟教程',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/runoob.png',
              a_href: 'http://www.runoob.com/',
              child_desc: '菜鸟教程,提供了编程的基础技术教程.学的不仅是技术，更是梦想！',
            },
            {
              child_name: 'w3school',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/w3school.png',
              a_href: 'http://www.w3school.com.cn/',
              child_desc: 'w3school 在线教程 , 全球最大的中文 Web 技术教程。',
            },
            {
              child_name: '百度前端技术学院',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ifebaidu.png',
              a_href: 'http://ife.baidu.com/',
              child_desc: '百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交平台。',
            },
            {
              child_name: '表严肃-不要水，讲干货',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/biaoyansu.png',
              a_href: 'http://biaoyansu.com/',
              child_desc: '基础教程视频,B站良心up主,满满的干货.',
            },
            {
              child_name: 'HEAD',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/head.png',
              a_href: 'https://github.com/joshbuchea/HEAD',
              child_desc: '最全的 head 列表，真心佩服这种偏执的整理能力',
            },
            {
              child_name: '前端开发仓库',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ciaoca.png',
              a_href: 'http://code.ciaoca.com/',
              child_desc: 'Web前端开发仓库，收录常用的JavaScript及jQuery插件，并提供在线演示效果。',
            },
            {
              child_name: 'learnGitBranching',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/learnGitBranching.png',
              a_href: 'https://github.com/pcottle/learnGitBranching',
              child_desc:
                'learnGitBranching是一个git仿真沙盒，提供一系列的交互式学习指导/挑战，用来加快学习git提交树如何工作。learnGitBranching的主界面左边是模拟终端窗口，另外是图示区。图示区用图形表明了git代码库当前的提交记录、分支、HEAD指向等。 目前有法语、韩语、日语以及中文版本。',
            },
            {
              child_name: '前端九部-入门者手册2019',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/fe9.png',
              a_href: 'https://www.yuque.com/fe9/basic',
              child_desc: '九部成员合著的web前端开发零基础入门手册',
            },
            {
              child_name: '力扣-LeetCode',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/leetcode.png',
              a_href: 'https://leetcode-cn.com/',
              child_desc:
                '码，码不停题. 全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 Dream Offer！',
            },
            {
              child_name: '前端周刊',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/frontenddevhandbook.png',
              a_href: 'https://frontend-weekly.com/',
              child_desc: '前端周刊，给前端同学准备的每周1小时阅读清单',
            },
            {
              child_name: 'Git的奇技淫巧',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/frontend-notebook.png',
              a_href: 'https://github.com/521xueweihan/git-tips',
              child_desc: '列举了常用的 Git 命令和一些小技巧',
            },
          ],
        },
        {
          Category_id: 'apiDoc',
          category_CN: '文档API',
          category_icon: 'icon-icon_bangzhuwendang',
          category_item: 'apiDocItem',
          item_children: [
            {
              child_name: 'HTML5',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/w3HTML5.png',
              a_href: 'https://www.w3.org/html/ig/zh/wiki/HTML5',
              child_desc: 'HTML5开发文档,开源(w3c组织)',
            },
            {
              child_name: 'HTML5 + API',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/html5plus.png',
              a_href: 'http://www.html5plus.org/doc/h5p.html',
              child_desc: 'HTML5+规范,HTML5中国产业联盟',
            },
            {
              child_name: 'CSS参考手册',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/doyoe.png',
              a_href: 'http://css.doyoe.com/',
              child_desc: 'Web前端开发人员提供最新、最全的CSS中文版在线资料，涵盖CSS3参考手册。',
            },
            {
              child_name: 'NEC(CSS规范)',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/netease.png',
              a_href: 'http://nec.netease.com/',
              child_desc:
                'NEC包括了规范、框架、代码库、插件等内容，致力于为前端开发人员提供高效率高质量的前端页面开发解决方案。',
            },
            {
              child_name: 'jQuery API 中文文档',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/cuishifeng.jpg',
              a_href: 'http://jquery.cuishifeng.cn/index.html',
              child_desc: 'jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 载 | jquery api chm',
            },
            {
              child_name: 'vue.js中文文档',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vuejs.png',
              a_href: 'https://cn.vuejs.org/',
              child_desc: 'vue.js官方中文文档',
            },
            {
              child_name: 'npm 中文文档',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/npmjs.png',
              a_href: 'https://www.npmjs.cn/',
              child_desc:
                'npm 是 JavaScript 世界的包管理工具，并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码，管理项目依赖关系。npm，是全球最大的开源库生态系统。',
            },
            {
              child_name: 'Node.js 中文文档',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/nodeapp.png',
              a_href: 'https://www.nodeapp.cn/',
              child_desc:
                'Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型，使其轻量又高效。Node.js 的包管理器',
            },
            {
              child_name: 'React 中文文档',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/reactdocschina.png',
              a_href: 'https://react.docschina.org/',
              child_desc: '用于构建用户界面的 JavaScript 库',
            },
            {
              child_name: 'React Native 中文网',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/reactnative.png',
              a_href: 'https://reactnative.cn/',
              child_desc: '使用JavaScript和React编写原生移动应用',
            },
            {
              child_name: 'Node.js 中文网API',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/nodeapp.png',
              a_href: 'http://nodejs.cn/api/',
              child_desc: 'nodejs中文网中文文档',
            },
            {
              child_name: 'Flutter',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/flutter.png',
              a_href: 'https://flutterchina.club/',
              child_desc: 'Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。',
            },
            {
              child_name: 'html5 Platform',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/platform.png',
              a_href: 'https://platform.html5.org/',
              child_desc: 'HTML5的web浏览技术图谱',
            },
          ],
        },
        {
          Category_id: 'portalsCommunity',
          category_CN: '门户&社区',
          category_icon: 'icon-songmenhuwangzhan',
          category_item: 'portalsCommunityItem',
          item_children: [
            {
              child_name: 'GitHub',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/github.png',
              a_href: 'https://github.com/',
              child_desc: '一个面向开源及私有软件项目的托管平台,全球最大同性交友网站',
            },
            {
              child_name: 'Stack Overflow',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/StackOverflow.png',
              a_href: 'https://stackoverflow.com/',
              child_desc: '全球最大的技术问答网站，是一个与程序相关的IT技术问答网站',
            },
            {
              child_name: '掘金 - juejin.im',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/juejin.png',
              a_href: 'https://juejin.im/welcome/frontend',
              child_desc: '一个帮助开发者成长的社区',
            },
            {
              child_name: 'SegmentFault 思否',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/segmentfault.png',
              a_href: 'https://segmentfault.com/channel/frontend',
              child_desc: 'SegmentFault 思否 为开发者提供问答、学习与交流编程知识的平台，创造属于开发者的时代！',
            },
            {
              child_name: '博客园',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/cnblogs.png',
              a_href: 'https://www.cnblogs.com/',
              child_desc: '博客园是一个面向开发者的知识分享社区。',
            },
            {
              child_name: 'v2ex',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/v2ex.png',
              a_href: 'https://www.v2ex.com/',
              child_desc: '一个关于分享和探索的地方',
            },
            {
              child_name: 'InfoQ',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/infoq.png',
              a_href: 'https://www.infoq.cn/',
              child_desc: 'InfoQ 是一个实践驱动的社区资讯站点，致力于促进软件开发领域知识与创新的传播。',
            },
            {
              child_name: 'IBM-developerworks',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/IBMdeveloperworks.png',
              a_href: 'https://www.ibm.com/developerworks/cn/',
              child_desc: 'IBM developerWorks，IBM 的官方开发者项目。学习资源，开发工具，和技术社区。',
            },
            {
              child_name: '知乎',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/zhihu.png',
              a_href: 'https://www.zhihu.com/',
              child_desc: '每日必刷，可以关注前端开发等话题',
            },
            {
              child_name: '开源中国',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/oschina.png',
              a_href: 'https://www.oschina.net/',
              child_desc: '开源中国 www.oschina.net 是目前中国最大的开源技术社区。',
            },
            {
              child_name: 'W3Cways',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/w3cways.png',
              a_href: 'https://www.w3cways.com/',
              child_desc: 'Web前端学习之路，网站提供很丰富的相关技术中文文档。',
            },
            {
              child_name: 'Helloweba',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/helloweba.png',
              a_href: 'https://www.helloweba.net/',
              child_desc:
                'Helloweba为广大WEB开发者提供Javascript前端、PHP后端、服务器运维知识以及业界相关的高质量技术文章分享.',
            },
            {
              child_name: 'PHP中文网',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/phpcn.png',
              a_href: 'http://www.php.cn/',
              child_desc: 'php中文网-教程_手册_视频-免费php在线学习平台.',
            },
            {
              child_name: '前端里',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/yyyweb.png',
              a_href: 'http://www.yyyweb.com/',
              child_desc: '专注于分享最前沿的Web开发技术，教程，资源和素材，是面向网站开发人员和设计师的学习交流平台',
            },
          ],
        },
        {
          Category_id: 'organization',
          category_CN: '组织团队',
          category_icon: 'icon-zuzhi',
          category_item: 'organizationItem',
          item_children: [
            {
              child_name: '万维网联盟W3C',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/w3.png',
              a_href: 'https://www.w3.org/',
              child_desc: '万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。',
            },
            {
              child_name: '奇舞团',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/75team.png',
              a_href: 'https://75team.com/',
              child_desc: '奇虎360公司Web平台部前端工程师 + 部分特约嘉宾 组成的一个前端团队。',
            },
            {
              child_name: '百度EFE',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/efebaidu.png',
              a_href: 'http://efe.baidu.com/',
              child_desc: '百度EFE技术体系，前身是ECOM前端团队，后经过技术的发展，逐渐形成一套完善的前端技术体系。',
            },
            {
              child_name: '淘宝前端团队(FED)',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/taobaofed.png',
              a_href: 'http://taobaofed.org/',
              child_desc: '淘宝前端团队，用技术为体验提供无限可能。',
            },
            {
              child_name: '腾讯AlloyTeam',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/alloyteam.png',
              a_href: 'http://www.alloyteam.com/',
              child_desc:
                '来自于腾讯SNG(社交网络事业群)，是主要负责腾讯Q+、WebQQ、QQ群空间项目的团队，致力于Web前端技术的研究。',
            },
            {
              child_name: '百度FEX',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/fexbaidu.png',
              a_href: 'http://fex.baidu.com/',
              child_desc: 'FEX 是百度Web 前端研发部的别名，是社区基础技术部中的前端团队。',
            },
            {
              child_name: '凹凸实验室',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/aotu.png',
              a_href: 'https://aotu.io/',
              child_desc: '京东用户体验设计部出品',
            },
            {
              child_name: '阿里巴巴国际UED团队',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav//aliued.jpg',
              a_href: 'http://www.aliued.com/',
              child_desc: '在更新的屏幕里创造出更好的产品和更优的体验',
            },
            {
              child_name: '阿里妈妈MUX',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/alimama.png',
              a_href: 'https://mux.alimama.com/posts/front-end.html',
              child_desc: '阿里妈妈MUX - UX 体验工作平台',
            },
            {
              child_name: '去哪儿网 UED',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/qunar.jpg',
              a_href: 'http://ued.qunar.com/',
              child_desc: 'Qunar UED, 去哪儿, 前端, FE, FED, UED',
            },
            {
              child_name: '美团技术团队',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/meituan.png',
              a_href: 'https://tech.meituan.com/',
              child_desc: '美团点评技术团队',
            },
            {
              child_name: '大搜车无线团队',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/souche.png',
              a_href: 'http://f2e.souche.com/blog/',
              child_desc: '前端网红 小芋头君 所在的团队，文章质量高，尤其是 Node 方向的',
            },
            {
              child_name: '微软开发者网络MSDN',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/msdnmicrosoft.png',
              a_href: 'https://msdn.microsoft.com/zh-cn/',
              child_desc: '使用 Microsoft Developer Network 学习开发 | MSDN',
            },
            {
              child_name: '印记中文',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/docschina.png',
              a_href: 'https://www.docschina.org/',
              child_desc:
                '收集了由社区翻译的比较流行的前端相关框架、工具的中文版文档。为学习一些新的框架扫平了语言障碍',
            },
          ],
        },
        {
          Category_id: 'framework',
          category_CN: '框架类库',
          category_icon: 'icon-iframetianjia',
          category_item: 'frameworkItem',
          item_children: [
            {
              child_name: 'JQuery',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/jquery.png',
              a_href: 'http://jquery.com/',
              child_desc: 'jQuery是一个快速、简洁的JavaScript框架.',
            },
            {
              child_name: 'Vue',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vuejs.png',
              a_href: 'https://cn.vuejs.org/',
              child_desc: '一套用于构建用户界面的渐进式框架.简单却不失优雅,小巧而不乏大匠',
            },
            {
              child_name: 'React',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/reactdocschina.jpg',
              a_href: 'https://react.docschina.org/',
              child_desc: 'React是一个JavaScript框架,用于构建“可预期的”和“声明式的”Web用户界面.',
            },
            {
              child_name: 'Angular',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/angular.png',
              a_href: 'https://www.angular.cn/',
              child_desc: '一套框架，多种平台移动端 & 桌面端',
            },
            {
              child_name: 'AngularJs',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/angularjs.jpg',
              a_href: 'http://www.angularjs.net.cn/',
              child_desc: 'Google推出的MVVM框架',
            },
            {
              child_name: 'Zepto',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/Zepto.jpg',
              a_href: 'https://github.com/madrobby/zepto',
              child_desc: 'Zepto最初是为移动端开发的库,是jQuery的轻量级替代品',
            },
            {
              child_name: 'Flutter',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/flutter.png',
              a_href: 'https://flutter.io/',
              child_desc: 'Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。',
            },
            {
              child_name: 'Backbone',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/backbone.jpg',
              a_href: 'https://github.com/jashkenas/backbone',
              child_desc: '一套web开发框架,基于jQuery和underscore的一个前端js框架。',
            },
            {
              child_name: 'Ember.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ember.jpg',
              a_href: 'https://www.emberjs.com/',
              child_desc: '一个用于创建 web 应用的 JavaScript MVC 框架',
            },
            {
              child_name: 'Preact',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/preact.png',
              a_href: 'https://preactjs.com/',
              child_desc: '一个快速轻量的 React 替代方案，具有 ES6 API、组件化和虚拟 DOM',
            },
            {
              child_name: 'Egg',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/eggjs.png',
              a_href: 'https://eggjs.org/zh-cn/',
              child_desc: '一个用于更好地构建企业应用的框架，内置流程管理，高度可定制，有强大的插件系统。',
            },
            {
              child_name: 'KISSY',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/kissy.png',
              a_href: 'http://docs.kissyui.com/',
              child_desc: 'KISSY 是一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。',
            },
            {
              child_name: 'RequireJS',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/requirejs.png',
              a_href: 'http://www.requirejs.cn/',
              child_desc: 'RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一',
            },
            {
              child_name: 'Sea.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/seajs.png',
              a_href: 'https://seajs.github.io/seajs/docs/',
              child_desc: 'SeaJS是一个遵循CMD规范的JavaScript模块加载框架',
            },
            {
              child_name: 'astro',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/seajs.png',
              a_href: 'https://astro.build/',
              child_desc: 'Build faster websites',
            },
            {
              child_name: 'tauri',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/seajs.png',
              a_href: 'https://tauri.app/zh-cn/',
              child_desc: 'Build faster websites',
            },
          ],
        },
        {
          Category_id: 'JavaScriptAbout',
          category_CN: 'JavaScript相关',
          category_icon: 'icon-js',
          category_item: 'JavaScriptAboutItem',
          item_children: [
            {
              child_name: 'JavaScript开发者应懂的33个概念',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/33_js_concepts.png',
              a_href: 'https://github.com/stephentian/33-js-concepts/blob/master/README.md',
              child_desc:
                '这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备，但在未来学习（JavaScript）中，可以作为一篇指南。',
            },
            {
              child_name: 'JavaScript 秘密花园',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/JavaScript-Garden.png',
              a_href: 'http://bonsaiden.github.io/JavaScript-Garden/zh/',
              child_desc: 'JavaScript 细节点分析',
            },
            {
              child_name: 'ECMAScript 6 入门',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/es6.png',
              a_href: 'http://es6.ruanyifeng.com/#README',
              child_desc: '阮一峰的《ECMAScript 6入门》',
            },
            {
              child_name: '30 seconds of code',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/30secondsofcode.png',
              a_href: 'https://30secondsofcode.org/',
              child_desc: '分享了大量有用的Javascript片段,你可以在30秒或更少时间中理解。',
            },
            {
              child_name: 'JS 函数式编程指南',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/dianzishu.png',
              a_href: 'https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/',
              child_desc: 'JS 函数式编程指南 gitbook电子书',
            },
            {
              child_name: 'TypeScript中文网',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/TypeScriptcn.png',
              a_href: 'https://www.tslang.cn/',
              child_desc: 'TypeScript中文网中文文档',
            },
            {
              child_name: 'TypeScript Handbook',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/dianzishu.png',
              a_href: 'https://zhongsp.gitbooks.io/typescript-handbook/content/',
              child_desc: 'TypeScript Handbook（中文版）',
            },
          ],
        },
        {
          Category_id: 'cssAbout',
          category_CN: 'CSS相关',
          category_icon: 'icon-socialcss3outline',
          category_item: 'cssAboutItem',
          item_children: [
            {
              child_name: 'Sass',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/sasscss.jpg',
              a_href: 'http://sass.bootcss.com/',
              child_desc: 'Sass 是成熟、稳定、强大的 CSS 扩展语言。',
            },
            {
              child_name: 'Less',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/lesscss.png',
              a_href: 'https://less.bootcss.com/',
              child_desc: '给 CSS 加点料,是一门向后兼容的 CSS 扩展语言。',
            },
            {
              child_name: 'Stylus',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/stylus.png',
              a_href: 'http://stylus-lang.com/',
              child_desc: '富有表现力的、动态的、健壮的CSS',
            },
            {
              child_name: 'Animate.css',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/animatecss.jpg',
              a_href: 'https://daneden.github.io/animate.css/',
              child_desc: 'css内置了很多典型的css3动画,兼容性好使用方便。',
            },
            {
              child_name: 'CSS 选择器演示',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/css_selecter.png',
              a_href: 'https://www.haorooms.com/tools/css_selecter/',
              child_desc: '本css选择器可以通过本页面直观的理解 CSS 选择器的作用区域',
            },
            {
              child_name: '浏览器hack大全',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/browserhacks.png',
              a_href: 'http://browserhacks.com/',
              child_desc:
                '由于不同的浏览器，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，于是就有了针对不同的浏览器写不同的CSS code，这就叫CSS hack',
            },
            {
              child_name: 'CSS Hack Table',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/swordaircsstools.png',
              a_href: 'https://swordair.com/tools/css-hack-table/',
              child_desc: 'CSS hack 表格',
            },
            {
              child_name: 'LoadersCSS',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/loaders.png',
              a_href: 'https://connoratherton.com/loaders',
              child_desc: '用 CSS 技术实现 loading 动画',
            },
            {
              child_name: 'text-spinners',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/text-spinners.png',
              a_href: 'https://github.com/maxbeier/text-spinners',
              child_desc: '又是一款 spinners 效果的库，用来做 loading 正合适。',
            },
            {
              child_name: 'Can I Use',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/caniuse.png',
              a_href: 'https://caniuse.com/',
              child_desc: '一个检测浏览器对JS、HTML5、CSS、SVG或者其他Web前端相关特性支持程度的列表。',
            },
            {
              child_name: 'A Single Div',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/asinglediv.png',
              a_href: 'https://a.singlediv.com/',
              child_desc: '纯CSS实现的div图片盒子,很有意思',
            },
            {
              child_name: '30 Seconds of CSS',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/30-seconds-of-css.png',
              a_href: 'https://30-seconds.github.io/30-seconds-of-css/',
              child_desc: '收集了常用的CSS代码段,你可以通过30秒或者更少的时间去了解它',
            },
            {
              child_name: 'CSS Inspiration -- CSS灵感',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/CSS-Inspiration.png',
              a_href: 'https://chokcoco.github.io/CSS-Inspiration/#/',
              child_desc: '学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。',
            },
            {
              child_name: 'CSScomb',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/csscomb.png',
              a_href: 'http://csscomb.com/',
              child_desc: '一个超棒的CSS属性排序工具',
            },
            {
              child_name: 'Button Generator',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ButtonGenerator.png',
              a_href: 'https://www.bestcssbuttongenerator.com/',
              child_desc: '提供各种按钮的CSS代码，你可以从预设的按钮中选择并使用模板用于自己的设计',
            },
            {
              child_name: 'EnjoyCSS',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/enjoycss.png',
              a_href: 'https://enjoycss.com/',
              child_desc: '一个完整的代码生成器，可以自定义输入域或CSS3按钮',
            },
            {
              child_name: 'Animista',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/animista.png',
              a_href: 'http://animista.net/',
              child_desc: 'CSS动态效果样式在线自定义',
            },
            {
              child_name: 'AniCollection',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/anicollection.png',
              a_href: 'http://anicollection.github.io/#/',
              child_desc: 'CSS3动效预设收藏集合',
            },
            {
              child_name: 'CSS Generator Tool',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/cssgenerator.png',
              a_href: 'https://cssgenerator.org/',
              child_desc: 'CSS各种对象样式和效果在线生成工具',
            },
            {
              child_name: 'Ceaser',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ceaser.png',
              a_href: 'https://matthewlein.com/tools/ceaser',
              child_desc: 'CSS贝塞尔动画在线调试工具',
            },
            {
              child_name: 'CSS Gradient Generator',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/gradient-editor.png',
              a_href: 'http://www.colorzilla.com/gradient-editor/',
              child_desc: 'CSS渐变在线生成器',
            },
            {
              child_name: 'CSS Reference',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/cssreference.png',
              a_href: 'https://cssreference.io/',
              child_desc: '非常棒的免费的CSS属性指导手册',
            },
            {
              child_name: 'ColorSpark',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/colorspark.png',
              a_href: 'https://colorspark.app/',
              child_desc: '随机生成好看的颜色、渐变色，可以一键复制 CSS 代码',
            },
            {
              child_name: 'FontSpark',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/fontspark.png',
              a_href: 'https://fontspark.app/',
              child_desc: '随机字体在线预览，用过都说好。',
            },
            {
              child_name: 'Pixel Art to CSS',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/pixelartcss.png',
              a_href: 'https://github.com/jvalen/pixel-art-react',
              child_desc: '由React提供的像素艺术动画和绘图Web应用程序',
            },
            {
              child_name: 'Autoprefixer CSS',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/autoprefixer.png',
              a_href: 'http://autoprefixer.github.io/',
              child_desc: '(在线)autoprefixer是一个postcss插件，用于解析CSS并添加供应商前缀。',
            },
          ],
        },
        {
          Category_id: 'codeSource',
          category_CN: '代码素材/片段',
          category_icon: 'icon-daima',
          category_item: 'codeSourceItem',
          item_children: [
            {
              child_name: 'microjs',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/microjs.png',
              a_href: 'http://microjs.com/#',
              child_desc: '迷你前端开发框架和类库资源收集,前端开发工程师必备的网站, 网站收集了各种各样的框架和代码',
            },
            {
              child_name: 'jQuery插件库',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/jq22.png',
              a_href: 'http://www.jq22.com/',
              child_desc: '致力于收集jQuery插件和提供各种jQuery特效的详细使用方法,在线预览，jQuery插件下载及教程',
            },
            {
              child_name: 'JQuerySchool',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/jq-school.png',
              a_href: 'http://www.jq-school.com/',
              child_desc:
                'jqueryschool是国内最大的jquery原创分享社区，专门分享原创jquery插件、jquery工具、jquery特效、html5、css3、jquery教程的网站，分享原创设计，把开发代码封装成插件，最短时间掌握jquery知识。',
            },
            {
              child_name: 'jQuery之家',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/htmleaf.png',
              a_href: 'http://www.htmleaf.com/',
              child_desc:
                '搜集和整理各种jQuery插件，jQuery特效，jquery ui，jQuery教程，JS特效，网页特效，以及各种html5，css3动画和效果，为前端开发者提供最全面的网页开发素材。',
            },
            {
              child_name: 'dowebok',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/dowebok.png',
              a_href: 'http://www.dowebok.com/',
              child_desc: 'dowebok意为做好网站，为用户提供代码、素材、特效、教程、模板等建站服务。',
            },
            {
              child_name: '代码库CocoaChina',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/cocoachina.png',
              a_href: 'http://code.cocoachina.com/',
              child_desc:
                '代码频道为您提供代码下载，免费代码，开发代码，代码库，代码大全，iOS代码，代码分享等最新相关代码',
            },
            {
              child_name: '发现DIV.IO',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/divio.png',
              a_href: 'https://div.io/digg',
              child_desc: '代码模块/实例分享网站',
            },
            {
              child_name: 'COTLib 代码库',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ctolib.png',
              a_href: 'https://www.ctolib.com/',
              child_desc: 'JavaScript开发社区 | 码库CTOLib',
            },
            {
              child_name: '模板之家',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/cssmoban.png',
              a_href: 'http://www.cssmoban.com/',
              child_desc:
                'CSS模板之家为你提供大量精品网页模板,企业网站模板,网站模板下载,DIV+CSS模板,网页设计模板,网站后台模板,个人博客模板,上千种免费网页模板下载',
            },
            {
              child_name: 'Html5 Tricks',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/html5tricks.png',
              a_href: 'https://www.html5tricks.com/',
              child_desc: '很多前端实现的功能，可以在线查看效果，也可以下载源码',
            },
            {
              child_name: 'codemyui',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/codemyui.png',
              a_href: 'https://codemyui.com/',
              child_desc: '采集有趣的网站UI代码片段',
            },
            {
              child_name: 'PlainJS',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/plainjs.png',
              a_href: 'https://plainjs.com/',
              child_desc: '该仓库都是用原生js写的插件和组件，很实用',
            },
            {
              child_name: 'Snippets',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/snippets.png',
              a_href: 'http://snippets.barretlee.com/#!/snippets',
              child_desc: '小胡子哥的代码收藏夹，Snippets 管理工具',
            },
          ],
        },
        {
          Category_id: 'templatePlug',
          category_CN: '模板插件',
          category_icon: 'icon-chajian2',
          category_item: 'templatePlugItem',
          item_children: [
            {
              child_name: 'Swiper',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/swiper.png',
              a_href: 'https://www.swiper.com.cn/',
              child_desc: '目前应用较广泛的移动端网页触摸内容滑动js插件',
            },
            {
              child_name: 'art-template',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/art-template.png',
              a_href: 'https://github.com/aui/art-template',
              child_desc:
                '一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。',
            },
            {
              child_name: 'iScroll',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/iScroll.png',
              a_href: 'https://github.com/cubiq/iscroll',
              child_desc: '一个高性能，资源占用少，无依赖，多平台的javascript滚动插件',
            },
            {
              child_name: 'fullPage.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/fullPage.png',
              a_href: 'https://alvarotrigo.com/fullPage/zh/',
              child_desc: '一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。',
            },
            {
              child_name: 'Layer弹窗',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/layui.png',
              a_href: 'http://layer.layui.com/',
              child_desc: '一个让你想到即可做到的web弹窗/层解决方案。',
            },
            {
              child_name: 'Hint.css',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/kushagragour.png',
              a_href: 'https://kushagragour.in/lab/hint/',
              child_desc: '一款非常小巧的提示框效果插件。',
            },
            {
              child_name: 'Lightbox',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/lightbox.png',
              a_href: 'https://lokeshdhakar.com/projects/lightbox2/',
              child_desc: '以弹框形式集中展示图片的JavaScript库。',
            },
            {
              child_name: 'Siema',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/siema.jpg',
              a_href: 'https://pawelgrzybek.github.io/siema/',
              child_desc: '轻量级简单的纯 JavaScript 轮播插件，支持触摸手势',
            },
            {
              child_name: 'Datatables',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/datatables.jpg',
              a_href: 'http://datatables.club/',
              child_desc:
                'Datatables是一款jquery表格插件，它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。',
            },
            {
              child_name: 'Waterfall',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/waterfall.jpg',
              a_href: 'http://wlog.cn/waterfall/index-zh.html',
              child_desc: '一款仿Pinterest网站的响应式无限动态加载图片瀑布流特效jQuery插件',
            },
            {
              child_name: 'Sticker.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/stickerjs.jpg',
              a_href: 'http://stickerjs.cmiscm.com/',
              child_desc: '一款仿贴纸效果插件。',
            },
            {
              child_name: 'multiScroll.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/multiScroll.jpg',
              a_href: 'https://alvarotrigo.com/multiScroll/#first',
              child_desc: '创建分割的多滚动页面特效插件。',
            },
            {
              child_name: 'Sortable',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/Sortable.jpg',
              a_href: 'http://rubaxa.github.io/Sortable/',
              child_desc: '一个简约的 JavaScript 库用于在现代浏览器中拖放列表重新排序 ，支持任何JS框架。',
            },
            {
              child_name: 'jQuery File Upload Plugin',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/jQuery-File-Upload.png',
              a_href: 'https://blueimp.github.io/jQuery-File-Upload/',
              child_desc: '一个有功能强大的 jQuery 上传组件，支持多文件选择、拖拽上传、验证、图片和多媒体预览等功能。',
            },
            {
              child_name: 'Interact.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/interactjs.png',
              a_href: 'http://interactjs.io/',
              child_desc:
                ' interact.js是一个随意改变形状插件，,它非常强大的，灵活拖放，改变大小，支持现代浏览器的多点触摸手势，基于SVG的运用，能运行在包括在IE8+的浏览器',
            },
            {
              child_name: 'Background-blur',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/background-blur.jpg',
              a_href: 'https://msurguy.github.io/background-blur/#',
              child_desc: '实用的超轻的跨浏览器的图像模糊 jQuery 插件，基于 SVG 生成，效果很好',
            },
            {
              child_name: 'blur-admin',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/blur-admin.png',
              a_href: 'https://github.com/akveo/blur-admin',
              child_desc: '视觉冲击极强的管理后台，各种动画效果。',
            },
            {
              child_name: 'Holder.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/holderjs.png',
              a_href: 'https://github.com/imsky/holder',
              child_desc: '占位图片生成器',
            },
            {
              child_name: 'placeholder.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/placeholder.png',
              a_href: 'https://github.com/hustcc/placeholder.js',
              child_desc: '另一款占位图片生成器',
            },
            {
              child_name: 'Echo.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/echojs.png',
              a_href: 'https://github.com/toddmotto/echo',
              child_desc: '简单的JavaScript轻量级图像延迟加载库',
            },
            {
              child_name: 'jQuery-LazyLoad',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/jquery_lazyload.png',
              a_href: 'https://github.com/tuupola/jquery_lazyload/',
              child_desc:
                '基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度',
            },
            {
              child_name: 'Picdiet.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/picdiet.png',
              a_href: 'https://widget.picdiet.com/',
              child_desc:
                '下一代js图片上传组件,节约服务器80%的带宽及硬盘容量，加快网站加载速度，降低服务器处理图片的负荷',
            },
            {
              child_name: 'imagesLoaded',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/imagesloaded.png',
              a_href: 'https://github.com/desandro/imagesloaded',
              child_desc: '检测图片是否加载完成的插件',
            },
            {
              child_name: 'quicklink',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/quicklink.png',
              a_href: 'https://github.com/GoogleChromeLabs/quicklink',
              child_desc:
                'quicklink 是一个通过预加载资源来提升后续方案速度的轻量级工具库。旨在提升浏览过程中，用户访问后续页面时的加载速度。',
            },
            {
              child_name: 'AJAX-Cache',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ajax-cache.png',
              a_href: 'https://github.com/tower1229/AJAX-Cache',
              child_desc:
                'AJAX-Cache是一款jQuery插件，基于localStorage/sessionStorage实现异步请求缓存功能，并提供“快照”和“定时”两种缓存模式。',
            },
          ],
        },
        {
          Category_id: 'graphical',
          category_CN: '可视化',
          category_icon: 'icon-tubiao',
          category_item: 'graphicalItem',
          item_children: [
            {
              child_name: 'D3.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/d3js.png',
              a_href: 'https://d3js.org/',
              child_desc: '用动态图形显示数据的JavaScript库',
            },
            {
              child_name: 'Echarts',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/echarts.png',
              a_href: 'http://echarts.baidu.com/',
              child_desc: '百度开发的可定制的数据可视化图表',
            },
            {
              child_name: 'three.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/threejs.png',
              a_href: 'https://threejs.org/',
              child_desc: 'three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能',
            },
            {
              child_name: 'Highcharts',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/hcharts.png',
              a_href: 'https://www.highcharts.com.cn/',
              child_desc: 'Highcharts 是一个用纯JavaScript编写的一个图表库，兼容IE6+',
            },
            {
              child_name: 'AntV',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/antv.png',
              a_href: 'https://antv.alipay.com/',
              child_desc:
                '蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。',
            },
            {
              child_name: 'Chart.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/chartjs.png',
              a_href: 'https://www.chartjs.org/',
              child_desc: '一个简单、面向对象，为设计和开发者准备的图表绘制工具库',
            },
            {
              child_name: 'Leaflet',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/leafletjs.png',
              a_href: 'https://leafletjs.com/',
              child_desc: '一个用于移动端渲染交互式地图开源JavaScript库',
            },
          ],
        },
        {
          Category_id: 'ide',
          category_CN: '编辑器/IDE',
          category_icon: 'icon-shebeikaifa',
          category_item: 'ideItem',
          item_children: [
            {
              child_name: 'Sublime Text',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/sublimetext.png',
              a_href: 'http://www.sublimetext.com/',
              child_desc:
                '神级代码编辑软件(Sublime Text 3),SublimeText是一个代码编辑器。也是HTML和散文先进的文本编辑器。',
            },
            {
              child_name: 'Visual Studio Code',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vscode.png',
              a_href: 'https://code.visualstudio.com/',
              child_desc:
                '一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。。',
            },
            {
              child_name: 'Webstorm',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/webstorm.png',
              a_href: 'http://www.jetbrains.com/webstorm/',
              child_desc: 'jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器',
            },
            {
              child_name: 'Atom',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/atom.png',
              a_href: 'https://atom.io/',
              child_desc: 'Atom 是github专门为程序员推出的一个跨平台文本编辑器。',
            },
            {
              child_name: 'HBuilder',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/dcloud.png',
              a_href: 'http://www.dcloud.io/',
              child_desc:
                'HBuilder是当前最快的HTML开发工具,强大的代码助手帮你快速完成开发,最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛',
            },
            {
              child_name: 'Vim',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vim.png',
              a_href: 'https://www.vim.org/',
              child_desc:
                'Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器，在Vi的基础上改进和增加了很多特性。',
            },
            {
              child_name: 'Notepad++',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/notepad.png',
              a_href: 'https://notepad-plus-plus.org/',
              child_desc:
                'Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL),有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。',
            },
            {
              child_name: 'HBuilderX',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/hbuilderx.png',
              a_href: 'http://www.dcloud.io/hbuilderx.html',
              child_desc: 'HBuilderX，简称HX，是轻如编辑器、强如IDE的合体版本',
            },
          ],
        },
        {
          Category_id: 'fontIco',
          category_CN: '字体图标',
          category_icon: 'icon-font',
          category_item: 'fontIcoItem',
          item_children: [
            {
              child_name: 'iconfont',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/iconfont.png',
              a_href: 'https://www.iconfont.cn/',
              child_desc: '阿里妈妈MUX打造的图标库，是国内功能很强大且图标内容很丰富的矢量图标库。',
            },
            {
              child_name: 'Font Awesome',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/fontawesome.png',
              a_href: 'http://fontawesome.dashgame.com/',
              child_desc: '一款风靡全球的图标字体库和CSS框架。',
            },
            {
              child_name: 'icomoon',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/icomoon.png',
              a_href: 'https://icomoon.io/',
              child_desc: '免费开源的字体图标库。',
            },
            {
              child_name: 'MFG Labs icon set',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/mfglabs.png',
              a_href: 'http://mfglabs.github.io/mfglabs-iconset/',
              child_desc: '免费字体图标',
            },
            {
              child_name: 'FindIcons',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/findicons.png',
              a_href: 'https://findicons.com/',
              child_desc: '免费图标和矢量文件',
            },
            {
              child_name: 'Easy Icon',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/easyicon.png',
              a_href: 'https://www.easyicon.net/',
              child_desc: '提供 超过五十万个 SVG、PNG、ICO、ICNS格式图标搜索、图标下载服务。',
            },
            {
              child_name: 'iconmonstr',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/iconmonstr.png',
              a_href: 'https://iconmonstr.com/',
              child_desc: '外国字体图标网站,为项目提供免费的简单图标',
            },
            {
              child_name: 'FLATICON',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/FLATICON.png',
              a_href: 'https://www.flaticon.com/',
              child_desc: 'icon下载',
            },
            {
              child_name: 'ICONFINDER',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/iconfinder.png',
              a_href: 'https://www.iconfinder.com/',
              child_desc: '高质量付费图标下载',
            },
            {
              child_name: 'Noun Project',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/thenounproject.png',
              a_href: 'https://thenounproject.com/',
              child_desc: 'icon下载',
            },
            {
              child_name: 'RPG-Awesome',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/RpgAwesome.png',
              a_href: 'http://nagoshiashumari.github.io/Rpg-Awesome/',
              child_desc: 'icon下载',
            },
            {
              child_name: 'Orion Icon Library',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/orioniconlibrary.png',
              a_href: 'https://orioniconlibrary.com/',
              child_desc:
                '多达6000专业免费的SVG矢量图标，还支持深度的定制，比如更换配色，更改线条粗细，变换图标风格(细线条、粗线条、扁平)，一键生成相关代码。',
            },
            {
              child_name: 'gitmoji',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/gitmoji.png',
              a_href: 'https://gitmoji.carloscuesta.me/',
              child_desc: '可以使用在github上的emoji图标',
            },
            {
              child_name: 'Emoji Cheat Sheet',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/emoji-cheat-sheet.png',
              a_href: 'https://www.webfx.com/tools/emoji-cheat-sheet/',
              child_desc: '可以使用在github上的emoji图标',
            },
            {
              child_name: 'Emoji searcher',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/Emojisearcher.png',
              a_href: 'https://emoji.muan.co/',
              child_desc: 'Emoji表情大全',
            },
            {
              child_name: '草莓图标库',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/chuangzaoshi.png',
              a_href: 'http://chuangzaoshi.com/icon/',
              child_desc: '为开发者设计的一套免费开源图标库',
            },
            {
              child_name: 'Unicons',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/unicons.png',
              a_href: 'https://iconscout.com/unicons',
              child_desc: '超過 1000 個向量圖示免費下載，完美像素放大縮小不影響解析度',
            },
            {
              child_name: 'Ikonate',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ikonate.png',
              a_href: 'https://www.ikonate.com/',
              child_desc: '完全可定制的矢量图标',
            },
          ],
        },
        {
          Category_id: 'vision',
          category_CN: '视觉设计',
          category_icon: 'icon-shijuesheji',
          category_item: 'visionItem',
          item_children: [
            {
              child_name: 'Color Hunt',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/colorhunt.png',
              a_href: 'https://colorhunt.co/',
              child_desc: '网站配色专家',
            },
            {
              child_name: 'Dribbble',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/dribbble.png',
              a_href: 'https://dribbble.com/',
              child_desc: '设计灵感',
            },
            {
              child_name: 'Pixabay',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/pixabay.png',
              a_href: 'https://pixabay.com/',
              child_desc: '全球最大的免费可商用高清图库网站，超过130万张免费的优质图片及视频素材。',
            },
            {
              child_name: 'StockSnap.io',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/stocksnap.png',
              a_href: 'https://stocksnap.io/',
              child_desc: '高清免费大图素材，不用登陆直接可以下载，每周更新超过百张高清免费图片。',
            },
            {
              child_name: '全球酷站中心',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/iiimg.png',
              a_href: 'http://iiimg.cn/',
              child_desc: '同步更新全球html5网站，很适合学习最新网站设计趋势。',
            },
            {
              child_name: '罫線・飾り罫ライン素材',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/free-line-design.png',
              a_href: 'http://free-line-design.com/',
              child_desc: '分割线素材',
            },
            {
              child_name: 'loading.io',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/loading.io.png',
              a_href: 'https://loading.io/',
              child_desc: 'loading图生成',
            },
            {
              child_name: 'wallhalla',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/wallhalla.png',
              a_href: 'https://wallhalla.com/',
              child_desc: '强大的检索功能图库',
            },
            {
              child_name: 'pngimg',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/pngimg.png',
              a_href: 'http://pngimg.com/',
              child_desc: 'pngimg图片素材',
            },
            {
              child_name: 'Color Hex',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/colorhexa.png',
              a_href: 'https://www.colorhexa.com/',
              child_desc: '配色网',
            },
            {
              child_name: 'flatuicolors',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/flatuicolors.png',
              a_href: 'https://flatuicolors.com/',
              child_desc: '扁平化配色',
            },
            {
              child_name: 'Subtle Patterns',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/SubtlePatterns.png',
              a_href: 'https://www.toptal.com/designers/subtlepatterns/',
              child_desc: 'Patterns素材,网页背景图',
            },
            {
              child_name: 'Pttrns',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/pttrns.png',
              a_href: 'https://pttrns.com/',
              child_desc: 'App界面灵感',
            },
            {
              child_name: 'Lapa',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/lapa.png',
              a_href: 'https://www.lapa.ninja/',
              child_desc: '产品官网、落地页设计欣赏',
            },
            {
              child_name: 'Cool Backgrounds',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/coolbackgrounds.png',
              a_href: 'https://coolbackgrounds.io/',
              child_desc: '生成非常酷的彩色背景图像',
            },
            {
              child_name: '365psd',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/365psd.png',
              a_href: 'https://cn.365psd.com/',
              child_desc: '下载免费高品质的 PSD 文件、插图和图形。浏览我们的图库，快速找到心仪图像，商业使用完全免费。',
            },
            {
              child_name: 'UIgradients',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/uigradients.png',
              a_href: 'https://uigradients.com/',
              child_desc: '简洁舒服的渐变配色',
            },
            {
              child_name: 'Freebiesbug',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/freebiesbug.png',
              a_href: 'https://freebiesbug.com/',
              child_desc: '高质量设计网站、资源聚合站点',
            },
            {
              child_name: 'OnePageLove',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/onepagelove.png',
              a_href: 'https://onepagelove.com/',
              child_desc: '网站和APP单页界面欣赏',
            },
            {
              child_name: 'UpLabs',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/uplabs.png',
              a_href: 'https://www.uplabs.com/',
              child_desc: '采集前端作品设计、iOS UI设计',
            },
            {
              child_name: 'Reeoo',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/reeoo.png',
              a_href: 'http://reeoo.com/',
              child_desc: '全球最火热的酷站画廊',
            },
            {
              child_name: 'SiteSee',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/sitesee.png',
              a_href: 'https://sitesee.co/',
              child_desc: '收录漂亮的界面设计网站',
            },
            {
              child_name: 'Calltoidea',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/calltoidea.png',
              a_href: 'https://www.calltoidea.com/',
              child_desc: '收集优秀UI组件元素设计的站点',
            },
            {
              child_name: 'Simple Desktops',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/simpledesktops.png',
              a_href: 'http://simpledesktops.com/',
              child_desc: '一个极简风格壁纸网站',
            },
            {
              child_name: 'Wallroom',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/wallroom.png',
              a_href: 'https://wallroom.io/',
              child_desc: '精美壁纸网站,壁纸分为了1K、2K、4K、5K、8K',
            },
          ],
        },
        {
          Category_id: 'blog',
          category_CN: '大牛博客',
          category_icon: 'icon-fanshe',
          category_item: 'blogItem',
          item_children: [
            {
              child_name: '阮一峰',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ruanyifeng.png',
              a_href: 'http://www.ruanyifeng.com/home.html',
              child_desc: "阮一峰的个人网站 - Ruan YiFeng's Personal Website",
            },
            {
              child_name: '廖雪峰',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/liaoxuefeng.png',
              a_href: 'https://www.liaoxuefeng.com/',
              child_desc: '研究互联网产品和技术，提供原创中文精品教程',
            },
            {
              child_name: '张鑫旭',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/zhangxinxu.png',
              a_href: 'https://www.zhangxinxu.com/',
              child_desc: '张鑫旭的个人博客首页，张鑫旭的技术作品，张鑫旭的生活成长',
            },
            {
              child_name: '尤雨溪',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/evanyou.png',
              a_href: 'https://evanyou.me/',
              child_desc: 'Design, Code & Things in Between',
            },
            {
              child_name: '颜海镜',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/yanhaijing.png',
              a_href: 'https://yanhaijing.com/',
              child_desc: '颜海镜的博客,专注于web前端',
            },
            {
              child_name: '彬Go',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/bingo929.png',
              a_href: 'http://blog.bingo929.com/',
              child_desc: '一直从事于Web前端开发行业，热爱Javascript/CSS/HTML进行优雅的Web前端开发',
            },
            {
              child_name: '田永强/朴灵',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/html5ify.png',
              a_href: 'http://html5ify.com/',
              child_desc: '《深入浅出Node.js》作者,朴灵，阿里数据平台数据产品部资深工程师。',
            },
            {
              child_name: '周爱民',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/aimingoo.png',
              a_href: 'https://aimingoo.github.io/',
              child_desc: 'JavaScript语言精髓与编程实践作者',
            },
            {
              child_name: '技术胖',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/jspang.png',
              a_href: 'https://jspang.com/',
              child_desc: '技术胖,该站有很多免费的前端学习视频',
            },
            {
              child_name: '勾三股四',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/jiongks.png',
              a_href: 'http://jiongks.name/',
              child_desc: ' 淘宝',
            },
            {
              child_name: 'CSS森林',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/cssforest.png',
              a_href: 'http://blog.cssforest.org/',
              child_desc: '腾讯优秀前端重构,网站/页面重构',
            },
            {
              child_name: '叶小钗',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/yexiaochai.png',
              a_href: 'http://www.cnblogs.com/yexiaochai',
              child_desc: '刀狂剑痴叶小钗',
            },
            {
              child_name: '雅X共赏',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/yaxgongshang.png',
              a_href: 'https://refined-x.com/',
              child_desc: '枪在手，跟我走，前端路上不回头',
            },
          ],
        },
        {
          Category_id: 'chrome',
          category_CN: 'chrome插件',
          category_icon: 'icon-iconset0284',
          category_item: 'chromeItem',
          item_children: [
            {
              child_name: 'Chrome插件英雄榜',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ChromeAppHeroes.png',
              a_href: 'https://zhaoolee.gitbooks.io/chrome/content/',
              child_desc: '为优秀的Chrome插件写一本中文说明书, 让Chrome插件英雄们造福人类',
            },
            {
              child_name: 'WEB前端助手(FeHelper)',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/FeHelper.png',
              a_href:
                'https://chrome.google.com/webstore/detail/web%E5%89%8D%E7%AB%AF%E5%8A%A9%E6%89%8Bfehelper/pkgccpejnmalmdinmhkkfafefagiiiad?hl=zh-CN',
              child_desc: '前端实用工具集，谁用谁知道！',
            },
            {
              child_name: 'Image Downloader',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ImageDownloader.png',
              a_href:
                'https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=zh-CN',
              child_desc: '一款能够查看网页中包含的所有图像和链接，并支持图片批量下载的chrome插件。',
            },
            {
              child_name: 'Vue.js devtools',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/Vue.js devtools.png',
              a_href:
                'https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN',
              child_desc: '基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展',
            },
            {
              child_name: 'ColorZilla',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ColorZilla.png',
              a_href: 'https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=zh-CN',
              child_desc: '为设计师提供了一种简单的浏览器平台工具来找到具体颜色数值并且测量它们的不同',
            },
            {
              child_name: 'JSONView',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/JSONView.png',
              a_href: 'https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=zh-CN',
              child_desc: '一款非常实用的格式化和语法高亮JSON格式数据查看器jQuery插件。它是查看json数据的神器。',
            },
            {
              child_name: 'Markdown Viewer',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/MarkdownViewer.png',
              a_href:
                'https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk?hl=zh-CN',
              child_desc: '在浏览器中查看markdown文档,免去应用之间的切换',
            },
            {
              child_name: 'Wappalyzer',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/wappalyzer.png',
              a_href: 'https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg',
              child_desc:
                '分析目标网站所采用的平台构架、网站环境、服务器配置环境、JavaScript框架、编程语言等参数的chrome网站技术分析插件',
            },
            {
              child_name: 'Octotree',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/octotree.png',
              a_href: 'https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc?hl=en-US',
              child_desc: '超实用的GitHub可视化代码树插件',
            },
            {
              child_name: 'Ghelper',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ghelper.png',
              a_href:
                'https://chrome.google.com/webstore/detail/%E8%B0%B7%E6%AD%8C%E4%B8%8A%E7%BD%91%E5%8A%A9%E6%89%8B-%E5%BC%80%E5%8F%91%E7%89%88/cieikaeocafmceoapfogpffaalkncpkc?hl=en-US',
              child_desc: '可以免费使用谷歌系列服务的插件',
            },
          ],
        },
        {
          Category_id: 'aidedDevTools',
          category_CN: ' 辅助开发工具',
          category_icon: 'icon-hebingxingzhuang-',
          category_item: 'aidedDevToolsItem',
          item_children: [
            {
              child_name: 'Getman',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/getman.png',
              a_href: 'https://getman.cn',
              child_desc: '在线接口测试,模拟接口,正则匹配',
            },
            {
              child_name: 'Easy Mock',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/easymock.png',
              a_href: 'https://easy-mock.com',
              child_desc: 'Easy Mock 是一个可视化, 并且能快速生成模拟数据的持久化服务.',
            },
            {
              child_name: 'YAPI',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/yapi.png',
              a_href: 'http://yapi.demo.qunar.com',
              child_desc:
                'YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。',
            },
            {
              child_name: '开发工具箱',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/box3.png',
              a_href: 'http://www.box3.cn/',
              child_desc: '这个网站集合了各种工具，相信总有一款你用得上。',
            },
            {
              child_name: 'CodePen',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/codepen.png',
              a_href: 'https://codepen.io/',
              child_desc: 'CodePen是浏览器中的HTML，CSS和JavaScript代码编辑器，可即时预览查看和编写您的代码。',
            },
            {
              child_name: 'JS Bin',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/jsbin.png',
              a_href: 'http://jsbin.com/',
              child_desc:
                '一个在线网站代码调试工具，主要用于测试 JavaScript 和 CSS 的代码片段的Web 应用，拥有简单的操作界面和全面的测试环境。',
            },
            {
              child_name: 'PageSpeed Insights',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/pagespeedinsights.png',
              a_href: 'https://developers.google.com/speed/pagespeed/insights/',
              child_desc: 'Google在线性能测试网站、优化建议',
            },
            {
              child_name: 'Responsinator',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/responsinator.png',
              a_href: 'http://www.responsinator.com/',
              child_desc: '各大尺寸设备响应式屏幕效果显示',
            },
            {
              child_name: 'Browser Sandbox',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/BrowserSandbox.png',
              a_href: 'https://turbo.net/browsers',
              child_desc: '各大平台浏览器兼容性在线测试',
            },
            {
              child_name: '17ce网站测速',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/17ce.png',
              a_href: 'https://www.17ce.com/',
              child_desc:
                '测试网站在全国各地和海外的打开速度，全面的报表功能、对比功能、地图展示、柱型图展示等专业测速网站',
            },
            {
              child_name: 'IPIP.NET',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ipip.png',
              a_href: 'https://www.ipip.net/',
              child_desc: '最专业的 IP 地址库,该站有许多ip类工具',
            },
            {
              child_name: 'Codelf',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/codelf.png',
              a_href: 'https://unbug.github.io/codelf/',
              child_desc: 'Codelf,变量命名,函数命名,方法命名,变量命名神器',
            },
          ],
        },
        {
          Category_id: 'otherTools',
          category_CN: ' 其他工具',
          category_icon: 'icon-gongju1',
          category_item: 'otherToolsItem',
          item_children: [
            {
              child_name: 'SM.MS',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/smms.png',
              a_href: 'https://sm.ms/',
              child_desc: '图床网站,无外链限制，无流量限制',
            },
            {
              child_name: 'Cutterman',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/cutterman.png',
              a_href: 'http://www.cutterman.cn/zh/cutterman',
              child_desc: '最好用的切图工具,它是免费的,就是这么任性! 此站很多神器。',
            },
            {
              child_name: 'FontConverter',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/FontConverter.png',
              a_href: 'http://www.freefontconverter.com/#&linkId=404',
              child_desc: '将字体转成网页webfont专用字体',
            },
            {
              child_name: 'font-face generator',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/font-face-generator.png',
              a_href: 'https://everythingfonts.com/font-face',
              child_desc: '@font-face网页字体文件格式转换',
            },
            {
              child_name: 'TinyPNG',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/tinypng.png',
              a_href: 'https://tinypng.com/',
              child_desc: '超完美PNG压缩工具',
            },
            {
              child_name: 'BrowserFrame',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/browserframe.png',
              a_href: 'https://browserframe.com/',
              child_desc: '一个生成浏览器外壳的网站，它提供了两种方式来生成截图',
            },
            {
              child_name: 'Screen Guru',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/screenguru.png',
              a_href: 'https://screen.guru',
              child_desc: '实现通过网址生成截图功能',
            },
            {
              child_name: 'Carbon',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/carbon.png',
              a_href: 'https://carbon.now.sh',
              child_desc: '代码界美图秀秀,装逼用',
            },
            {
              child_name: 'easy PDF',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/easypdf.png',
              a_href: 'https://easypdf.com/cn',
              child_desc: '在线 PDF 转换工具',
            },
            {
              child_name: '有道云笔记',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/youdaonote.png',
              a_href: 'https://note.youdao.com/web',
              child_desc: '个人觉得比印象笔记好用的云笔记',
            },
            {
              child_name: 'SVG To PNG',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/svgtopng.png',
              a_href: 'https://svgtopng.com/zh/',
              child_desc: '免费在线SVG转PNG网站',
            },
            {
              child_name: '虫部落快搜',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/chongbuluo.png',
              a_href: 'https://search.chongbuluo.com/',
              child_desc:
                '快搜！虫部落全网独家首发出品！为你聚合Google,百度,必应等国内外综合搜索和学术,资源,专业领域知识等垂直搜索。精准搜索,便捷交互！是你的网络搜索第一站！',
            },
            {
              child_name: 'Photopea',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/photopea.png',
              a_href: 'https://www.photopea.com/',
              child_desc: '免安装的网页版“ps完美替代者”——Photopea，走红国外！',
            },
            {
              child_name: '万能命令',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/wnrun.png',
              a_href: 'https://wn.run/cn/',
              child_desc:
                'wn万能命令是一个在线工具效率平台，将各种高质量的在线工具按应用站点聚合起来，让你以方便快捷好记的方式寻找和使用各类在线工具。',
            },
            {
              child_name: '临时邮箱',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/24mail.png',
              a_href: 'http://24mail.chacuo.net/',
              child_desc:
                '填写邮箱时候，不想使用您的真实邮箱？那就使用24mail.chacuo.net 临时邮箱。不需要注册，邮箱持续24小时，比十分钟邮箱（10分钟)保持时间更长，可以任意设置邮箱名，随时更换邮箱。',
            },
            {
              child_name: '临时短信',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/pdflibr.png',
              a_href: 'https://www.pdflibr.com/',
              child_desc: '在线接收短信，接收短信验证码，显示迅速，与国外类似短信验证码接收更快捷。',
            },
            {
              child_name: 'Firefox Send',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/firefoxSend.png',
              a_href: 'https://send.firefox.com/',
              child_desc: '使用 Firefox Send 端到端加密分享文件，链接到期即焚。分享更私密，文件到期真正无痕迹。',
            },
          ],
        },
        {
          Category_id: 'conference',
          category_CN: '前端大会',
          category_icon: 'icon-shequjiaozhengju',
          category_item: 'conferenceItem',
          item_children: [
            {
              child_name: 'JS 中国开发者大会',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/jsconfchina.png',
              a_href: 'https://jsconfchina.com/',
              child_desc: '一场专注于JavaScript和Node.js技术的国际性大会',
            },
            {
              child_name: '中国 CSS 开发者大会',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/cssw3ctech.png',
              a_href: 'https://css.w3ctech.com/',
              child_desc: '提高css开发姿势的大会。',
            },
            {
              child_name: '前端圈',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/fequan.png',
              a_href: 'https://fequan.com/',
              child_desc: '打造专业的前端技术会议',
            },
            {
              child_name: 'Vue.js开发者大会',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vuew3ctech.png',
              a_href: 'https://vue.w3ctech.com/',
              child_desc: 'Vue.js开发者大会 中国站',
            },
          ],
        },
        {
          Category_id: 'contentManagement',
          category_CN: '内容管理',
          category_icon: 'icon-navneirongguanli',
          category_item: 'contentManagementItem',
          item_children: [
            {
              child_name: 'WordPress',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/wordpress.png',
              a_href: 'https://cn.wordpress.org/',
              child_desc:
                'WordPress是使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。',
            },
            {
              child_name: 'Hexo',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/hexo.png',
              a_href: 'https://hexo.io/zh-cn/',
              child_desc: '快速、简洁且高效的博客框架',
            },
            {
              child_name: 'GitHub Pages',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/GitHubPages.png',
              a_href: 'https://pages.github.com/',
              child_desc: 'Github Pages是Github免费提供给开发者的一款托管个人网站的产品。',
            },
            {
              child_name: 'Jekyll',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/jekyll.png',
              a_href: 'https://www.jekyll.com.cn/',
              child_desc: '将纯文本转化为静态网站和博客',
            },
            {
              child_name: 'Wix',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/wix.png',
              a_href: 'https://www.wix.com',
              child_desc: '免费的响应式商业化建站方案',
            },
            {
              child_name: 'VuePress',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vuepress.png',
              a_href: 'https://www.vuepress.cn/',
              child_desc: 'Vue 驱动的静态站点生成工具',
            },
            {
              child_name: 'Docusaurus',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/docusaurus.png',
              a_href: 'https://docusaurus.io/',
              child_desc: 'Facebook出品的 简单的开源文档站点生成器',
            },
            {
              child_name: 'docsify',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/docsify.png',
              a_href: 'https://docsify.js.org/#/zh-cn/',
              child_desc: '一个神奇的文档站点生成器 简单轻巧',
            },
            {
              child_name: 'Wiki js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/wikijs.png',
              a_href: 'https://wiki.js.org/',
              child_desc: '一个基于 NodeJS, Git 和 Markdown 的轻量级、现代化以及强大的 WIKI APP 生成工具',
            },
            {
              child_name: 'GitBook',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/gitbook.png',
              a_href: 'https://www.gitbook.com/',
              child_desc: 'GitBook 是一个基于 Node.js 的命令行工具，可使用 Github/Git 和 Markdown 来制作精美的电子书',
            },
          ],
        },
        {
          Category_id: 'someWebsite',
          category_CN: '一些网站',
          category_icon: 'icon-wangzhanguanli',
          category_item: 'someWebsiteItem',
          item_children: [
            {
              child_name: '免费资源网络社区',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/free.png',
              a_href: 'https://free.com.tw/',
              child_desc:
                '一个以免费为主题的台湾网站、部落格，内容包含科技新知、免费软体、线上工具、图库素材、WordPress 架站及应用程式介绍教学',
            },
            {
              child_name: '吾爱破解',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/52pojie.png',
              a_href: 'https://www.52pojie.cn/',
              child_desc:
                '吾爱破解论坛致力于软件安全与病毒分析的前沿，丰富的技术版块交相辉映，由无数热衷于软件加密解密及反病毒爱好者共同维护',
            },
            {
              child_name: '全能VIP视频在线解析',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/liumingyevideo.png',
              a_href: 'http://tool.liumingye.cn/video/',
              child_desc:
                '优酷VIP解析,爱奇艺VIP解析,腾讯VIP解析,乐视VIP解析,芒果VIP解析,视频解析,全能VIP视频解析,视频在线解析',
            },
            {
              child_name: 'MSDN，我告诉你',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/itellyou.png',
              a_href: 'https://msdn.itellyou.cn/',
              child_desc: '主要分享微软旗下产品，在这里可以下载到纯净版Windows系统、Office办公软件以及微软其它应用程序',
            },
            {
              child_name: '走114查询网',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/zou114.png',
              a_href: 'http://www.zou114.com/',
              child_desc: '提供常见与不常见的查询，说不定哪天就用上',
            },
            {
              child_name: '大眼仔旭',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/dayanzai.png',
              a_href: 'http://www.dayanzai.me/',
              child_desc:
                '主要分享各种Win平台实用工具，涵盖：图形图像、屏幕录像、网络软件、办公软件、格式转换、系统工具……以及各类实用的安卓应用软件',
            },
            {
              child_name: '奶牛快传',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/cowtransfer.png',
              a_href: 'https://cowtransfer.com/',
              child_desc: '一款临时文件传输平台',
            },
            {
              child_name: 'Smallpdf',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/smallpdf.png',
              a_href: 'https://smallpdf.com/cn',
              child_desc:
                '据说该网站是全世界浏览人数最多的PDF格式转换网站，网站中包含18种与PDF相关的转换方式，功能一应俱全、绝对是简单好用的线上 PDF 处理工具',
            },
            {
              child_name: 'MikuTools-工具集合',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/MikuTools.png',
              a_href: 'https://miku.tools/',
              child_desc: '一个轻量的工具集合',
            },
            {
              child_name: '国外网站大全资源网',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/egouz.png',
              a_href: 'https://www.egouz.com/',
              child_desc:
                '国外网站大全资源网是分享和推荐国外知名、实用、高质量的国外网址的站点，收录国外和国内各类实用网站,内容涵盖国外创意、设计、美食、视频、图片、旅游、文化、音乐等多领域站点资源，全方位了解国外互联网动态。',
            },
            {
              child_name: '科塔学术导航',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/sciping.png',
              a_href: 'https://site.sciping.com/',
              child_desc:
                '科塔学术导航-致力于成为国内领先的科研与学术资源导航平台，为科研人员提供科研网站导航，网址库等服务，让科研工作更简单、更有效率。',
            },
            {
              child_name: 'Awesome-Windows',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/AwesomeWindows.png',
              a_href: 'https://github.com/Awesome-Windows/Awesome/blob/master/README-cn.md',
              child_desc: 'Windows上优质&精选的最佳应用程序及工具列表。',
            },
            {
              child_name: '异星软件空间',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/yxbsh.png',
              a_href: 'http://yx.bsh.me/',
              child_desc:
                '给您提供精彩感受的软件博客！推荐精选好用实用的软件及资源，且有详细的图文评测介绍。大量绿色、好用软件及资源下载。',
            },
            {
              child_name: '大数据导航',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/199it.png',
              a_href: 'http://hao.199it.com/',
              child_desc:
                '大数据导航，以大数据产业为主，大数据工具为辅，给用户提供一个更加快速找到大数据相关的工具平台。',
            },
            {
              child_name: '今日热榜',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/tophub.png',
              a_href: 'https://tophub.today/',
              child_desc:
                '今日热榜提供各站热点聚合：微信、今日头条、百度、知乎、V2EX、微博、贴吧、豆瓣、天涯、虎扑、Github、华尔街见闻...全网新闻热点排行榜服务。',
            },
            {
              child_name: '全历史',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/allhistory.png',
              a_href: 'https://www.allhistory.com/',
              child_desc:
                '全历史(Allhistory）以AI知识图谱为核心引擎，通过高度时空化、关联化数据的方式构造及展现数字人文内容，尤其是历史知识。让用户沉浸在纵横开阔、左图右史的（历史、人文、社科等）知识海洋中。',
            },
          ],
        },
        {
          Category_id: 'environment',
          category_CN: '作业环境',
          category_icon: 'icon-aixin',
          category_item: 'environmentItem',
          item_children: [
            {
              child_name: 'VS Code',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/vscode.png',
              a_href: 'https://code.visualstudio.com/',
              child_desc: '这个不多说，个人开发编辑器',
            },
            {
              child_name: 'Node.js',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/nodeapp.png',
              a_href: 'http://nodejs.cn/download/',
              child_desc: 'JavaScript 运行环境',
            },
            {
              child_name: 'Git',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/git.png',
              a_href: 'https://git-scm.com/',
              child_desc: '版本控制工具',
            },
            {
              child_name: 'NVM',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/nvm.png',
              a_href: 'https://github.com/coreybutler/nvm-windows',
              child_desc: 'nvm (Node Version Manager) 是Nodejs版本管理器，可对不同的node版本快速进行切换。',
            },
            {
              child_name: 'Cmder',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/cmder.png',
              a_href: 'https://cmder.net/',
              child_desc:
                'cmder是一个增强型命令工具，通过它可以使用Windows下的所有命令，可以使你像操作Linux一样操作Windows，是一个值得我们拥有的高逼格软件。',
            },
            {
              child_name: '马克鳗',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/markman.png',
              a_href: 'http://www.getmarkman.com/',
              child_desc: '高效的设计稿标注、测量工具',
            },
            {
              child_name: 'PxCook',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/pxcook.png',
              a_href: 'https://www.fancynode.com.cn/pxcook',
              child_desc: '高效易用的自动标注工具, 生成前端代码',
            },
            {
              child_name: 'Bandizip',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/bandizip.png',
              a_href: 'http://www.bandizip.com/',
              child_desc: '个人最满意的压缩工具，没有之一',
            },
            {
              child_name: 'Typora',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/typora.png',
              a_href: 'https://www.typora.io/',
              child_desc: '一个适合新手的md编辑器，很好用',
            },
            {
              child_name: 'ScreenToGif',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/ScreenToGif.png',
              a_href: 'https://www.screentogif.com/?l=zh_cn',
              child_desc: '非常好用的gif生成器',
            },
            {
              child_name: 'Fences',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/fences.png',
              a_href: 'https://www.stardock.com/products/fences/',
              child_desc: '最好的桌面整理软件',
            },
            {
              child_name: 'Everything',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/Everything.png',
              a_href: 'https://www.voidtools.com/zh-cn/',
              child_desc: '快速定位本地资源文件',
            },
            {
              child_name: 'Listary',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/listary.png',
              a_href: 'https://www.listary.com/',
              child_desc: '文件名定位/搜索辅助软件',
            },
            {
              child_name: 'Snipaste',
              img_src: 'https://nakoruru.h7ml.cn/httpproxy/static.5ibug.net/vitepress/assets/images/nav/snipaste.png',
              a_href: 'https://www.snipaste.com/',
              child_desc: '最好用的截图软件，没有之一',
            },
          ],
        },
      ];
      for (var i = 0; i < nav.length; i++) {
        var addList = '<li><a href="#' + nav[i].Category_id + '">' + nav[i].category_CN + '</a></li>';
        $('.scrollcontent').append(addList);

        const section = document.createElement('section');
        section.className = 'item card-box';
        section.id = nav[i].Category_id;

        const container = document.createElement('div');
        container.className = 'container-fluid';

        const row = document.createElement('div');
        row.className = 'row';

        const itemTit = document.createElement('div');
        itemTit.className = 'item-tit';
        const strong = document.createElement('strong');
        strong.textContent = nav[i].category_CN;
        itemTit.appendChild(strong);
        row.appendChild(itemTit);

        const clearfix = document.createElement('div');
        clearfix.className = 'clearfix two-list-box';

        nav[i].item_children.forEach((item) => {
          const col = document.createElement('div');
          col.className = 'col-md-3 col-sm-4 col-xs-6';

          const a = document.createElement('a');
          a.href = item.a_href;
          a.className = 'card-link';
          a.target = '_blank';

          const cardTit = document.createElement('div');
          cardTit.className = 'card-tit';
          cardTit.textContent = item.child_name;

          const cardDesc = document.createElement('div');
          cardDesc.className = 'card-desc';
          cardDesc.textContent = item.child_desc;

          const imgDesc = document.createElement('img');
          imgDesc.className = 'card-img';
          imgDesc.src = item.img_src;

          a.appendChild(imgDesc);
          a.appendChild(cardTit);
          a.appendChild(cardDesc);
          col.appendChild(a);
          clearfix.appendChild(col);
        });

        row.appendChild(clearfix);
        container.appendChild(row);
        section.appendChild(container);
        $('#page').append(section);
      }

      window.onscroll = function () {
        //回到顶部
        var sllTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (sllTop > 240) {
          $('#get-top').css('display', 'block');
        } else {
          $('#get-top').css('display', 'none');
        }
      };
      $('#get-top').click(function () {
        $('body,html').animate(
          {
            scrollTop: 0,
          },
          800
        ); //点击回到顶部按钮，数字越小越快
      });
      //判断用户使用的设备
      var deviceVal = browserRedirect();

      function browserRedirect() {
        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == 'iphone os';
        var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
        var bIsUc = sUserAgent.match(/ucweb/i) == 'ucweb';
        var bIsAndroid = sUserAgent.match(/android/i) == 'android';
        var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
        var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
          return 'phone';
        } else {
          return 'pc';
        }
      }

      $('.nav-btn').on('click', function () {
        $('.nav').toggleClass('showNav');
        $(this).toggleClass('animated2');
      });

      // 默认搜索引擎的内容，如果界面修改了需要同步修改
      var thisSearch = 'http://www.caup.cn/search?q=';

      $('#txt').keydown(function (ev) {
        // 回车键的处理
        if (ev.keyCode == 13) {
          window.open(thisSearch + $('#txt').val());
          // $('#txt').val('');
          $('#box ul').html('');
        }
      });
      $(function () {
        // 搜索引擎列表，样式一行五个内容，自动换行
        var search = {
          data: [
            {
              name: '百度',
              url: 'https://www.baidu.com/s?wd=',
            },
            {
              name: '谷歌',
              url: 'https://www.google.com/search?q=',
            },
            {
              name: '必应',
              url: 'https://cn.bing.com/search?q=',
            },
            {
              name: '好搜',
              url: 'https://www.so.com/s?q=',
            },
            {
              name: '搜狗',
              url: 'https://www.sogou.com/web?query=',
            },
            {
              name: '淘宝',
              url: 'https://s.taobao.com/search?q=',
            },
            {
              name: '京东',
              url: 'http://search.jd.com/Search?keyword=',
            },
            {
              name: '天猫',
              url: 'https://list.tmall.com/search_product.htm?q=',
            },
            {
              name: '1688',
              url: 'https://s.1688.com/selloffer/offer_search.htm?keywords=',
            },
            {
              name: '知乎',
              url: 'https://www.zhihu.com/search?type=content&q=',
            },
            {
              name: '微博',
              url: 'https://s.weibo.com/weibo/',
            },
            {
              name: 'Bilibili',
              url: 'http://search.bilibili.com/all?keyword=',
            },
            {
              name: '豆瓣',
              url: 'https://www.douban.com/search?source=suggest&q=',
            },
            {
              name: '优酷',
              url: 'https://so.youku.com/search_video/q_',
            },
            {
              name: 'GitHub',
              url: 'https://github.com/search?q=',
            },
          ],
        };
        for (var i = 0; i < search.data.length; i++) {
          var addList = '<li>' + search.data[i].name + '</li>';
          $('.search-engine-list').append(addList);
        }
        $('.search-engine-name, .search-engine').hover(
          function () {
            $('.search-engine').css('display', 'block');
          },
          function () {
            $('.search-engine').css('display', 'none');
          }
        );
        $('.search-engine-list li').click(function () {
          var _index = $(this).index();
          var searchNameBtn = document.getElementById('search-engine-name');
          searchNameBtn.innerHTML = search.data[_index].name;
          thisSearch = search.data[_index].url;
          $('.search-engine').css('display', 'none');
        });
      });
      $('#search-btn').click(function () {
        var textValue = $('#txt').val();
        if (textValue != '') {
          window.open(thisSearch + textValue);
        }
      });
    </script>
  </body>
</html>
